vue导航栏点击切换样式

说明：导航栏点击后给对应tab标签增加背景色

HTML部分，颜色绑定class

<div class='upList' v-for="(item,index) in upNavList" :key="index" @click="change(index)" :class="{ backCol:current == index}">
 <nuxt-link :to='item.url' class='upTitle hover'>
  {{ item.title }}
 </nuxt-link>
</div>

CSS部分，点击tab显示背景色

.backCol{
  background: #02B8B8;
}

JS部分，

//前提是必须引入vuejs哦！
var vm = new Vue({
		el:"#wrap",
		data:{
			current: 0,
			upNavList:[
				{
					title: '企业服务',
					url: '/home/vipServe',
				},{
					title: '培训服务,
					url: '/home/vipServe'
				},{
	                title: '线上展厅',
	                url: '/home/vipServe'
	            },{
	                title: '会员服务',
	                url: '/home/vipServe'
	            },{
	                title: '产业商城',
	                url: '/home/vipServe'
	            },
				],
		},
	methods:{ 
		 change(index){
		    this.current=index;
		    console.log(this.current)
		 },
	} });

最后

以上就是活力飞鸟为你收集整理的vue导航栏点击切换样式的全部内容，希望文章能够帮你解决vue导航栏点击切换样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。