标签：解决 play 一个 数据 v-for log method limit ref
需求：每个li标签在点击的时候，都同时展开。
但是碰见几个问题：
1、如果点第一个li 所有li都会展开；
2、点击第一个li，第一个li展开，点击第二个li，第一个li闭合，第二个li展开
这两种情况都与预期不符，我们要求，点击第一个li展开，点击第二个li第一个li不闭合，第二个li展开，依次类推。
1、2是使用了v-show="activeIndex==index"导致的，因为数据是v-for遍历的，而activeIndex不是每个li私有的，是每个li公用的。
那么问题来了，如何解决呢？
说到私有，那就要用v-for=“(item,index) in arr” 中index去表示私有，使用:ref="index"去表示用户点击是当前的li。
<div id="demo" > <ul> <li v-for="(item,index) in arr" @click="clickItem(index)" :ref="index"> {{item}} <p style="display: none">123</p> </li> </ul> </div>
new Vue({ el: "#demo", data: { flag:true, arr:["和","啊","嗯","哦"], }, methods:{ clickItem(index){ if (this.$refs[index][0].childNodes[1].style.display=="none") { this.$refs[index][0].childNodes[1].style.display="block" }else if (this.$refs[index][0].childNodes[1].style.display=="block") { this.$refs[index][0].childNodes[1].style.display="none" } console.log(this.$refs[index][0].childNodes[1].style.display); } } })
这样就能实现每个li标签在点击的时候，可同时展开的效果了。
///////////////////////////////////////////////////////////////////////
顺便写一下点击第一个li，第一个li展开，点击第二个li，第一个li闭合，第二个li展开的代码
<div id="demo"> <ul> <li v-for="(item,index) in arr" @click="clickItem(index)"> {{item}} <p v-show="index==limit">123</p> </li> </ul> </div>
new Vue({ el: "#demo", data: { limit:-1, arr:[1,2,3,4] }, methods:{ clickItem(index){ if (index==this.limit) { this.limit=-1 }else{ this.limit=index; } } } })
标签：解决 play 一个 数据 v-for log method limit ref
原文地址：https://www.cnblogs.com/dirkhe/p/9490843.html
