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>
  • 相关阅读:
    [leetcode-91-Decode Ways]
    [leetcode-72-Edit Distance]
    [leetcode-67-Add Binary]
    [leetcode-137-Single Number II]
    [leetcode-60-Permutation Sequence]
    [leetcode-55-Jump Game]
    [leetcode-18-4Sum]
    [leetcode-15-3Sum]
    [leetcode-47-Permutations II]
    easyui tabs update 强制刷新页面
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/9387545.html
Copyright © 2011-2022 走看看