需求：每个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。
html
<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>
vue
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展开的代码
html
<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>
css
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;
}
}
}
})
转载于:https://www.cnblogs.com/dirkhe/p/9490843.html
