vue 一行代码实现nav切换

vue 一行代码实现nav切换

实现思路：动态添加class，active类名，

1，点击元素，将元素下标key值赋值给自定义空对象n,

2，当数据内点击元素的下标等于n时，替换class类名为active

代码如下：

<ul class="jishu-nav">　　　　　　
        <li v-for="(value,key) in dataList" :key="key" :class="key==n?'active':''" @click="n=key"  >
          {{value.name}}
        </li>        
      </ul>  
 data() {
    return {
      msg:'我是技术战法中心s',
      flag:false,
      n:0,  //自定义，初始active位置
      dataList:[{
          name:'安全管理',
          id:0
        },
        {
          name:'员工管理',
          id:1
        }
        ,
        {
          name:'设备管理',
          id:2
        },
        {
          name:'设备参数',
          id:3
        },
        {
          name:'项目管理',
          id:4
        },
        {
          name:'系统参数',
          id:5
        },       
      ]
    }
  },
 
}
</script>

转载请注明：https://www.cnblogs.com/wxyblog/p/11950324.html