<div :class="['but',{'active' :currentSort==index}]"
v-for="(item,index) in hs" :key="item.id" @click="dj(index)">
data() {
return {
currentSort:'',
};
},
methods: {
dj(index){
this.currentSort = index
console.log( this.currentSort);
}
}
<style>
.active{
border: 1px solid blue !important;//点击后显示的颜色
}
.but{
border: 1px solid rgb(243,243,243);//默认显示的颜色
}
</style>当我们触发点击事件的时候，传入循环的index ,这样我们就可以将绑定样式赋给点击到的对应内容
最后
以上就是重要羽毛最近收集整理的关于vue实现active点击切换样式的全部内容，更多相关vue实现active点击切换样式内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复