下面代码实现的功能:
v-for遍历下的元素,点击哪一个就给哪一个添加激活的样式,如果已经添加了样式,则点击取消样式。
点击下一个时,点击过的样式不会消失,类似于多选
思路:
先定义一个空数组isAdd用于存放激活元素的索引
点击时在class的判断条件中用indexOf搜索当前索引是否在数组isAdd中
如果在就添加tavActive样式
效果如下:
上代码:
<p v-for="(sel, index) in selection" :key="index" :class="{ tavActive:isAdd.indexOf(index) != -1 }" @click="tabCheck(index)">{{sel}}</p>
<script>
export default {
name: "details",
data(){
return{
selection:["tab1", 'tab2','tab3'],
isAdd:[]
}
},
methods:{
tabCheck(index){
let indexItem = this.isAdd.indexOf(index);
if( indexItem == -1 ){
this.isAdd.push(index);
}else{
this.isAdd.splice(indexItem,1);
}
}
}
}
</script>
如果要样式刷新不消失,将isAdd存入本地缓存就好了,sessionStorage或者localStorage都可以,看自己业务而定。