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;
        },
    }
  • 相关阅读:
    HDNOIP普及+提高整合
    [BZOJ4016][FJOI2014]最短路径树问题
    [BZOJ3697]采药人的路径
    [COJ0985]WZJ的数据结构(负十五)
    [KOJ6024]合并果子·改(强化版)
    [KOJ6023]合并果子·改
    [KOJ0574NOIP200406合并果子]
    Atomic operations on the x86 processors
    Javascript 严格模式详解
    const C语言(转)
  • 原文地址:https://www.cnblogs.com/wangjae/p/13589163.html
Copyright © 2011-2022 走看看