Vue 菜单栏点击实现高亮显示

步骤：

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

js:

export default {
    data () {
      return {
        checkindex: 0 // 初始化第一个栏块高亮
      }
    },
    methods: {
      toggle (index) {
        this.checkindex = index
      }

css:

  .active {
    background: white;
  }

　　上边的几行代码就能搞定这个功能，可能是没有想到的时候感觉有点难，等到做出来之后，就感觉没这么难了。

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/8660050.html