概述
<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点击切换样式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复