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;
}
}