需求: 每个 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>
- 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;
- }
- }
- }
- })
来源: http://www.bubuko.com/infodetail-2730797.html