Vue点击动态添加Class
1.先在data里增加一个变量,用来储存当前点击的元素data() {return {activeClass: -1,// 0为默认选择第一个,-1为不选择list: [{title: '全网搜索(100w+)'},{title: '优惠推荐(包邮10w+)'},],...
·
1.先在data里增加一个变量,用来储存当前点击的元素
data() {
return {
activeClass: -1,// 0为默认选择第一个,-1为不选择
list: [
{title: '全网搜索(100w+)'},
{title: '优惠推荐(包邮10w+)'},
],
}
},
2.在Template里面的代码,切记在click方法里面要传k
<el-row class="list">
<el-col :span="12" v-for="(v,k) in list" :key="k" :class="activeClass ==k?'active':''">
<span @click="IsActive(k)">{{v.title}}</span>
</el-col>
</el-row>
3.CSS代码
.active {
border-bottom: 1px solid #FE4520;
color: #FE4520;
}
4.methods代码
methods: {
IsActive(k) {
this.activeClass = k;
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)