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

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

更多专业前端知识，请上 【猿2048】www.mk2048.com