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>
image.png
 data() {
      return {
        isActive:-1,//默认提醒时间不选中(-1是不选中)
      }
    }
image.png
 //点击选中
      selected(item,index,label){
        this.isActive=index;
      },
image.png
上一篇 下一篇

猜你喜欢

热点阅读