*HTML代码块*
<div class='box' v-for="( item,index) in list" :class='{activeindex==index ? 'box2' :'' } @click='changeIndex(index)' >
{{item.title}}
</div>
css代码
.box{
width:160px;
padding:20px;
color:black;
text-align:center;
}
.box{
width:160px;
padding:20px;
color:red;
text-align:center;
}
JS代码
data(){
return{
activeindex:0,
list:[
{ title:'我是一‘},
{ title:'我是二‘,
{ title:'我是三‘,
{ title:'我是四‘}
]
}
},
method:{
changeIndex(index){
this.activeindex=index;
}
}
效果类似如图
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有