Vue中实现点击变色
默认内容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(){re
·
默认内容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;;
}
更多推荐
已为社区贡献2条内容
所有评论(0)