最近做项目,遇到一个问题,需要根据是否在数组里,判断是否渲染出来
这是一个多选的实现
// 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