<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
点击综合按钮后,将修改排序状态为默认,此时“综合”按钮处于激活状态。
其余按钮为默认状态。
效果图:
扫描二维码关注公众号,回复:
11274091 查看本文章