vue | vue實現列表同時展開與單獨展開

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