2020-08-03 vue 点击选中改变字体颜色并且显示图片(
2020-08-03 本文已影响0人
流泪手心_521
1.点击item设置当前的索引
index == isActive(isActive==label)
2.如果点击的索引和自定义的变量值相当添加选中class
3.v-show显示图片(条件也是index == isActive)
<div
class="selectedBox"
v-for="(item,label) in remindTypeList"
:key="label"
@click="selected(item,label,item.label)"
>
<div class='space'>
<span class="title medium" :class="{active:isActive==label}">{{item.dictName}}</span>
<span class='content' v-show="isActive==label">
<img class="icon-next" src="../../assets/images/right_icons.png" alt="选中">
</span>
</div>
<div class="line"></div>
</div>

data() {
return {
isActive:-1,//默认提醒时间不选中(-1是不选中)
}
}

//点击选中
selected(item,index,label){
this.isActive=index;
},
