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

  • 相关阅读:
    AVL树
    快速排序
    基数排序LSD_Radix_Sort
    归并排序
    JDBC连接池与工具类
    cookie的基础以及小案例
    javase基础4
    tomcat的request和response小案例
    javase基础3
    Servlet以及一个简单的登录案例
  • 原文地址:https://www.cnblogs.com/yeziyou/p/13495115.html
Copyright © 2011-2022 走看看