1:HTML
<ul>
<li v-for="(item,index) of itemList" :class="current===index ? 'active' : ''" @click="tabClick(item)">{{item.name}}</li>
</ul>
2:后端数据,(这里自己做的假数据)
data(){
return{
itemList:[
{
name:"首页",
id:0,
},
{
name:"个人中心",
id:1,
},
{
name:"设置",
id:2,
}
],
current:0,//这里是为了开始显示哪一个
}
}
3:js
tabClick(item){
console.log(item);
this.current = item.id;//把id赋值给curent,从而达到点击哪个改变哪个的效果
},
4:css
//这里就是给导航栏被点击后的样式书写,我这里就随便写了
.active {
background: #8c939d;
color: pink;
}