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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM