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>