在使用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>
