zoukankan      html  css  js  c++  java
  • v-show

    v-show的原理是当值为false的时候,元素display:none  隐藏了元素且脱离文档流,但是在dom 中仍然存在。

    与v-if使用场景不同,文档中提到,当需要高频切换的时候使用v-show会更加的有益与性能,当然v-if的初始开销是要高于v-show的。

    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>
    <body>    
        <div id="root">
            <div v-show="true">我是show显示元素 -- 显示</div>
            <div v-show="false">我是show隐藏元素 -- 隐藏</div>
            
            <div v-show="true">
                <div v-show="true">我是show嵌套显示元素 -- 显示</div>
                <div v-show="false">我是show嵌套隐藏元素 -- 隐藏</div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var root = document.getElementById('root')
        function dealNode(el){
            let child = Array.from(el.children);
            child.forEach(item=>{
                if(item.getAttribute('v-show')==='false'){
                    item.style.display = 'none'
                }
                if(item.children && item.children.length){//如果有子元素就递归继续
                    dealNode(item);
                }
            })
        }
        dealNode(root)
    </script>
  • 相关阅读:
    排序算法整理
    V-REP Plugin 开发
    YAML-CPP
    YAML
    V-REP Remote API
    V-REP Plugin
    结构化方法与面向对象方法的比较
    敏捷软件开发vs传统软件工程
    个人项目-地铁出行路线规划程序
    Week1个人作业
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/9387545.html
Copyright © 2011-2022 走看看