[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

点击综合按钮后，将修改排序状态为默认，此时“综合”按钮处于激活状态。

其余按钮为默认状态。

 

 

 

效果图：