Vue 選單欄點選切換單個class(高亮),超簡單!
阿新 • • 發佈:2019-02-19
步驟:
- 遍歷物件(goods)獲取選單欄每一項的物件(item)和下標(index)
- 新增點選事件toggle(),傳入下標引數:
@click="fn1();fn2()"
- 動態切換classname:
:class="{'active':index ==checkindex }">
(class賦予對應下標值的DOM)
ps:該方法直接切換class,不需要手動新增清除其他非動態DOM的class
html
<ul>
<li v-for="(item,index) in goods" class="menu-item" @click="toggle(index);scrollToFoods(index)"
:class="{'active':index ==checkindex }">
</li>
</ul>
script
export default {
data () {
return {
checkindex: 0 // 初始化第一個欄塊高亮
}
},
methods: {
toggle (index) {
this.checkindex = index
}
css
.active {
background: white;
}