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;
                        }
                    }
                }
            })
  • 相关阅读:
    Java实现web页面内容抓取
    Java写入文件的几种方法及性能对比
    Java实现导出excel
    win10系统安装VMware虚拟机软件以及linux系统
    oracle11g安装教程
    oracle怎么建立本地连接
    工厂模式
    计算一个字符串中每个字符出现的次数
    MySql多表查询
    如何查看MySql的sql语句性能
  • 原文地址:https://www.cnblogs.com/dirkhe/p/9490843.html
Copyright © 2011-2022 走看看