vue 页面渲染是,根据是否在数组里,判断是否显示

最近做项目,遇到一个问题,需要根据是否在数组里,判断是否渲染出来

这是一个多选的实现

// multiSelect == 1 为多选
<ul class="q-main-t" v-if="item.multiSelect == 1">
     <li v-for="(subitem,subindex) in item.quectionList" :key="subindex"  @click="choiseItem(subindex)">
             <img class="info-img" :src="subitem.img" />
             <p>
                 <img v-if="multiAnswer.includes(subindex)" src="img/checked.png">
              <img v-else src="img/check.png" />
                 <span>{{subitem.text}}</span>
            </p>
     </li>
</ul>

在choiseItem方法里面subindex为当前选项的index;

choiseItem方法如下:

if(this.multiAnswer.includes(subindex)){
    this.multiAnswer = this.multiAnswer.filter(function (ele){return ele != subindex;});
}else{
    this.multiAnswer.push(subindex);
}

this.multiAnswer为已选择的答案集合

根据选中状态判断显示哪张图片,

如果multiAnswer里包含当前选项的index值,就显示选中的图片checked.png      multiAnswer.includes(subindex)。

否则用未选中的图片check.png

 

posted @ 2020-08-13 10:57  烂笔头~  Views(5678)  Comments(0Edit  收藏  举报