vue | vue实现列表同时展开与单独展开

Posted 2020-12-30 dirkhe

需求：每个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;
                    }
                }
            }
        })