2020-08-03 vue 循环多个标签,点击标签变色,再点击
2020-08-03 本文已影响0人
流泪手心_521
<div
class="selectedBox"
v-for="(item,label) in remindTypeList"
:key="label"
@click="selected(item,item.label)"
>
<div class='space'>
<span class="title medium" :class="{'active':spanIndex.indexOf(item.label)>-1}">{{item.dictName}}</span>
<span class='content' v-show="item.isShow">
<img class="icon-next" src="../../assets/images/right_icons.png" alt="选中">
</span>
</div>
<div class="line"></div>
</div>
image.png
data() {
return {
remindTypeList:[],//提醒数据
isActive:-1,//默认提醒时间不选中
spanIndex:[],//提醒时间多选
selectedTimeArr:[],
}
},
image.png
//点击选中
selected(index){
let arrIndex = this.spanIndex.indexOf(index);
console.log(arrIndex);
if(arrIndex>-1){
this.spanIndex.splice(arrIndex,1);
item.isShow=false
}else{
this.spanIndex.push(index);
item.isShow=true
}
},
image.png