[Vue] 點擊按鈕顯示后渲染為激活狀態

<ul class="sui-nav">
    <li @click="search.sortBy=''" :class="{active:search.sortBy===''}">
        <a href="#">綜合</a>
    </li>
    <li>
        <a href="#">銷量</a>
    </li>
    <li @click="search.sortBy='createTime'" :class="{active:search.sortBy==='createTime'}">
        <a href="#">新品</a>
    </li>
    <li>
        <a href="#">評價</a>
    </li>
    <li @click="search.sortBy='price'; search.descending = !search.descending" :class="{active: search.sortBy==='price'}">
        <a href="#">價格
            <v-icon v-show="search.descending">arrow_drop_down</v-icon>
            <v-icon v-show="!search.descending">arrow_drop_up</v-icon>
        </a>
    </li>
</ul>

 

 

使用UI框架為SUI

點擊綜合按鈕后，將修改排序狀態為默認，此時“綜合”按鈕處於激活狀態。

其余按鈕為默認狀態。

 

 

 

效果圖：