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>