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>