vue 列表单击显示当前列表内容隐藏其他的列表页,多次点击实现显示隐藏的功能...

 

1.//class --    sel_div已经把样式写好了;通过控制sel_div来控制样式的展示情况;

2.单击时,重新给showQA赋值为index;showQA与下标相同时,显示样式;同一时间只有一个li满足条件;

3.当第二次点击时,给一个状态开关isStatus,点击  that.isStatus = !that.isStatus;

4.由于是多条数据,所以给了一个数组,通过判断arr判断两次点击为同一条数据,两个条件同时满足,才进行显示;

 

//判断是否两次点击为同一个列表,isStatus判断两次以上的状态
if(newIndex == before && that.isStatus){

  that.showQA = -1;

}

//执行后,改变点击的状态;
that.isStatus = !that.isStatus;

html文件
//class --sel_div已经把样式写好了
<div class="about_problem page_product"> <span class="title">问题与解答</span> <ul id="about_answer"> <div v-for="(itemPro,index) in typeIdPro.sysqatypelist" :class="{sel_div:showQA == index}"> <li @click="getDetails(itemPro.id,index)"><span class="left">{{itemPro.title}}</span><p><span class="icon_close">+</span></p> </li> <div class="con" v-for="(itemPA,index) in listPA"> <router-link :to="{path:'usingSkillsDetails',query:{ id:itemPA.id,cxword:itemPA.cxword,flag:1}}" tag = "p">{{index+1}}、{{itemPA.title}}</router-link> </div> </div> </ul> </div>

 
 
js文件方法

data() {
  return {
    showQA:-1,//默认为0
    isStatus:false,

    showArr:[],

  }


methods:{

//得到问题的答案数据 getDetails:function(getQId,index){ let that = this; that.showArr.push(index) console.log(that.isStatus) let newIndex = that.showArr[that.showArr.length-1]; let before = that.showArr[that.showArr.length-2]; if(newIndex == before && that.isStatus){ that.showQA = -1; }else{ that.showQA = index; console.log(getQId); console.log(that.pids); var params = { pids:that.pids, typeid:getQId}; proAnsId(params).then(res=> { console.log(res.data) that.listPA = res.data; }) }
              //执行完后,改变状态 that.isStatus = !that.isStatus; console.log(that.showArr) },
}

  

显示结果

 

转载于:https://www.cnblogs.com/jiayeyuan/p/10110099.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值