vue实现点击导航栏切换变色的简单方法

最近写到导航栏的时候遇到一个问题，就是我们要实现导航栏中的被选中的项目高亮，而其他的项目保持原来的颜色，对于这种其实是有两种情况的；

情况1—导航栏是通过v-for遍历生产的

这种生成导航栏的情况还是比较多的
在进行遍历的时候我们会去获取被遍历数组的两个东西，一个是item ,一个是index

//就像这样
<li v-for="(item,index) in List " :key="index"></li>

当我们要给 li 动态的绑定一个样式的时候，就需要判断在什么时候绑定，在什么时候解绑；
index在这里就可以被当作是一种记号，比如项目里面有三个项目的时候，对应就会产生3个li，3个li对应的就是0，1，2；
我们可以在data部分定义一个变量 current 来存储当前的 index ，只有项目被标记的 index 和当前 current 存储的 index 相同的时候样式才会生效；

//active就是我们定义的样式
<li v-for="(item,index) in movies" :key="index" @click="change(index)" :class="{active:index == current}">{{item}}</li>

//script部分
data(){
	return{
		current：0
	}
}

另外我们还需要监控 current 的改变的，这样才能修正样式，这个时候我们需要一个函数来帮助我们在点击导航栏的时候修改 current 的值

//添加修改函数,变量传入当前index
<li v-for="(item,index)" in List :key="index" :class="{active: index ===  current}" @click="change(index)">{{item}}</li>

//script部分
methods:{
	change(index){
		this.current=index;
	}
}

这样就能够实现切换了；

情况2—router-link形成的导航栏

router-link也是我们经常使用的东西，这个也可以实现出一个导航栏；
这个相对来说就会比较容易
因为对于router-link标签，它在被选中的时候vue会自动对其绑定一个样式 router-link-active

从图中可以看到，上面是被选中的，所以会有额外的class，下面没有没有选中的只有自己的写的class

这样我们就直接对 router-link-active进行操作就好了

//html
<router-link to="/home/subhome" tag="a" class="tabItem" :class='{routerLinkActive}'>首页</router-link>
//css
.router-link-active{
  color: red;
}

这样就能够实现切换了，也不用借助变量和函数，是不是更加简单一点？