v-show
Posted hjj2ldq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章