vue 导航菜单切换样式设置

在使用vue开发的时候，几乎每个项目里面都会有导航菜单切换，不管是顶部导航菜单、还是侧边导航菜单，切换到当前的菜单，需要给当前的菜单一个height light，或者添加其它的样式。
类似于这样的效果。

image.png
1.导航菜单切换是使用路由跳转router-link,vue会给当前切换到的菜单a标签添加一个active的类名，直接给这个类名设置样式就好了。
2.如果是自己写的不涉及路由的跳转，类似于tab切换的效果，用一个公共变量记录当前切换的key，对比两个key是否相当，如果相等添加class类名。但是这个只适用于tab切换类似的效果，只设置一个的效果。

<template>
  <div class="top-element">
    <div v-for="(item,index) in datasource" :class={'currentElement':currentKey==item.key} @click="switch(item.key)">
{{item.key}}
  </div>
  </div>
</template>
<script>
data(){
  return {
  datasource:[{key:'1',flag:false},{key:'2',flag:false}]
  }
},
methods:{
  switch(key){
  this.currentKey=key
  }
}
</script>
<style lang="scss">
.currentElement{
  color:blue;
}
</style>

3.还有一种不涉及路由跳转，但是可以切换多个，类似于折叠面板的效果，同时展开多个，这种效果可以通过给data设置一个变量flag默认为false，当切换的时候通过索引找到在data中的位置，再设置为true。

<template>
  <div class="top-element">
    <div v-for="(item,index) in datasource" :class={'currentElement':currentKey==item.key} @click="switch(item,index)">
{{item.key}}
  </div>
  </div>
</template>
<script>
data(){
  return {
  currentKey:"",
  datasource:[{key:'1'},{key:'2'}]
  }
},
methods:{
  switch(item,index){
  this.datasource[index].flag=! this.datasource[index].flag;
  }
}
</script>
<style lang="scss">
.currentElement{
  color:blue;
}
</style>