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
上一篇 下一篇

猜你喜欢

热点阅读