zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    logback配置模板
    mail
    jpa,querydsl
    加密签名
    angular2快速开始
    主从复制
    随笔
    缺货源的小伙伴们 我发现一个超级好的货源供应链 分享给大家
    canal+kafka+logstash+es 架构 logstash的配置
    golang 根据图片url获取图片尺寸
  • 原文地址:https://www.cnblogs.com/yeziyou/p/13495115.html
Copyright © 2011-2022 走看看