Vue 菜单栏点击切换单个class（高亮），超简单！

步骤：

遍历对象（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;
}

效果图展示：