zoukankan      html  css  js  c++  java
  • vue v-for循环里面点击当前元素显示再点击隐藏

    <li v-for="(list,index) in getTableData(currentPage)" :key="index">
                  <div class="popup-msg-div">
                    <div class="msg-div-add">{{list.detail_address}}</div>
                    <div>{{list.serial_number}}</div>
                    <div>{{list.createtime}}</div>
                    <div class="msg-div-add">{{list.warn_desc}}</div>
                    <div class="popup-msg-more" @click="msgShow(index)">查看详情</div>
                  </div>
                  <div class="msg-box" v-show="activeIndex===index">
                    <div class="msg-box-tit popup-msg-tit ">
                      异常详情
                      <div class="popup-box-close" @click="msgClose(index)">收起<b>︽</b></div>
                    </div>
                    <div class="msg-div">
                      <div>异常原因</div>
                      <div>推送时间</div>
                      <div>推送人员</div>
                    </div>
                    <div class="msg-div" v-for="item in list.detailList">
                      <div>{{item.warn_desc}}</div>
                      <div>{{item.createtime}}</div>
                      <div>{{item.ctrl_name}}:{{item.ctrl_phone}}</div>
                    </div>
                  </div>
                </li>
     data() {
        return {
          activeIndex: -1 
        };
      },

    试下传不同的参数?

    <div class="popup-msg-more" @click="msgShow(index)">查看详情</div>
    msgShow (index) {
          this.activeIndex = this.activeIndex == index ? -1 : index;
    },

    先遍历,给getTableData这个数组每一项添加一个isShowDetail: false
    <div class="popup-msg-more" @click="msgShow(list,index)">查看详情</div>

    <div class="msg-box" v-show="list.isShowDetail">
    
    methods:{
        msgShow (list,index) {
            list.isShowDetail = !list.isShowDetail;
        },
    }
  • 相关阅读:
    机器学习之线性回归
    最长回文字串——manacher算法
    linux系统下pdf操作软件pdftk
    markdown表格
    3.9 标准化,让运营数据落入相同的范围
    3.numpy_array数组
    4. 归并排序和快速排序
    3.病毒分裂
    2. 大整数乘法
    1.单峰序列
  • 原文地址:https://www.cnblogs.com/wangjae/p/13589163.html
Copyright © 2011-2022 走看看