先说一下我想要实现的功能,就是点击li标签,给这个li标签加上颜色和底边框。函数里能获取到li的index下标,但是class切换没有效果
HTML代码:
<ul class="menuUl">
<li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key="index">
{{li}}
</li>
</ul>
JS代码:
export default {
name: "PersonalCenter",
components: {
Footer,
Head
},
data() {
return{
lis:['我的会员','历史记录','收藏','设置'],
SelectedLi:0
}
},
methods: {
SelectLi(index){
console.log(index)
this.SelectedLi=index
console.log(this.SelectedLi===index)
}
}
}
CSS代码:
在这之前我还给li标签设置了color样式和border-bottom样式,问题就出在这里,先加的样式不会被后加的样式覆盖,所以再绑定这个class加相同的样式就不会生效了
.isSelectedLi{
color: #2e7ce5;
border-bottom: 1px solid #2e7ce5;
}