1.html
<ul>
<li v-for='(item,index) in liList' :class='{actived:index==isactive}'
@click='clickLi(index)'>{{item}}</li>
</ul>
2.
data() {
return {
isactive:0, //默认第一个有样式
liList:['新增用户','退费用户','复购用户'],
}
},
methods:{
// 用户点击切换
clickLi(index){
//点击切换 变量的值 赋值为 index
this.isactive=index;
console.log(index);
}
}
3.
<style lang="scss" scoped>
.actived{
background-color: #2E75F2!important;
}
</style>