vue通过index下标判断，控制数据显示隐藏

qq_36618604

已于 2022-08-26 15:29:50 修改

阅读量870

点赞数 2

文章标签： vue.js html css javascript jquery

于 2022-08-26 15:28:28 首次发布

本文链接：https://blog.csdn.net/qq_36618604/article/details/126544277

版权

在这里插入图片描述

<ul id="OA_task_2" class="mui-table-view">
          <li class="mui-table-view-cell" v-for="(item,index) in gzLists" v-if="gzLists.length>0">
            <div class="mui-slider-right mui-disabled"  @click.stop="del_achievement(item,index,$event)">
              <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle" style="background: #fff;">
                <div class="contant">
                  <div class="cont_li_cont">
                    <div class="cont_card">创建日期：{{item.ctime.slice(0,10)}}</div>
                  </div>
                  <div class="rightBox">
                    <div class="cont_text">
                      <span>{{item.ticket_name}}</span>
                    </div>
                    <div class="cont_card_jl">
                      <div class="cont_xf" @click.stop="Totaldetails(item,index)">
                        <div style="position: absolute;right: 0px;">
                          <span style="position: absolute;right: 18px;width: 50px;font-size: 13px;">详情</span>
                          <i class="layui-icon layui-icon-down" v-if="showTicketArr.indexOf(index)!==-1" style="font-size: 16px; color: #3586ff;position: absolute;right: 0px;top: 1.2px"></i> 
                          <i class="layui-icon layui-icon-right" v-else style="font-size: 16px; color: #3586ff;position: absolute;right: 0px;top: 1.2px"></i>
                        </div>
                      </div>  
                    </div>
                  </div>
                </div>
                <!-- <div class="cont_li_detail" v-show="index == currentActive"> -->
                <div class="cont_li_detail" v-show='showTicketArr.indexOf(index)!==-1'>
                  <div class="cont_li_detail_copy">
                    <div class="conterLists_money" @click.stop="btn_copy(item)">复制</div>
                  </div>
                  <div class="user_blist_flex">
                    <div class="user_lists_time_week">
                      {{item.ticket_detail}}
                    </div>
                  </div>
                </div>
                <div style="clear: both;"></div>
            </div>
          </li>
          <li class="mui-table-view-cell" v-if="gzLists.length==0">
            <div  style="width: 100%;margin: 10px auto;text-align: center;color: #999;">暂无内容</div>
          </li>

data:{
gzLists:[],
showTicketArr:[],
},
Totaldetails(item,index){
var that = this;
let x = this.showTicketArr.indexOf(index)
x==-1?this.showTicketArr.push(index):this.showTicketArr.splice(x,1)
},