说明:导航栏点击后给对应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)
},
} });