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-show

最新文章

热门文章