zoukankan      html  css  js  c++  java
  • 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;
                        }
                    }
                }
            })
  • 相关阅读:
    NSWindow,一些有的沒的
    IT单身男士必看【找女友单身程序员】
    Base 64 Encoding 编码
    如何成为一名优秀的C程序员
    iOS学习笔记—ObjectiveC 委托、非正式协议、正式协议
    程序员学习能力提升三要素
    工程师如何不被PM欺负
    最常被程序员们谎称读过的计算机书籍
    一些重要的算法
    asp调用.Net 托管代码
  • 原文地址:https://www.cnblogs.com/dirkhe/p/9490843.html
Copyright © 2011-2022 走看看