默认内容1为红色,点击内容2时,内容2变为红色,点击内容3时,内容3变为红色
html
<ul>
<li v-for="(item,index) in items" :class="{active:currentIndex === index}" @click="clickLi(index)">{{item}}</li>
</ul>
js部分
data(){
return{
items:['内容1','内容2','内容3'],
currentIndex:0
}
},
methods:{
clickLi(index){
this.currentIndex = index
}
}
css部分
.active{
color: red;;
}
版权声明:本文为tuoersuo原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。