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;
  }

效果图展示：