本文主要是介绍V-if与display:none的区别 （v-if v-show display:none visibility:hidden 辨析），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言：网上有很多相似的内容，为啥我还再写一篇？因为那些文章千篇一律都说的是 v-if 与 v-show， display:none 与 visibility:hidden各自的关系，而对于v-if与display,v-show与display的关系说得不是很清楚，所以写下这篇小记。
v-if ：让Dom 节点直接消失。（即：视觉上看不到，也没有位置，dom节点也不在。）
v-show： 调用display:none 来控制元素是否展示。
display:none --> 物理空间消失，但是dom还在（即：视觉上看不到，也没有位置，但是dom节点还在）。
visibility：hidden; -->物理空间以及dom都还在（即：视觉上看不到，但位置它还占着，dom节点也在）。
综上所述：V-if与display:none的区别就是：
v-if = display:none + 干掉其Dom节点。
示意图：
visibility：hidden；视觉上消失，但是还占着位置。
display:none；视觉上消失，也不占位置，但Dom节点还在。
拓展：
Html style="visibility:hidden"与style="display:none"的区别
<html><head><title>style="visibility:hidden"与style="display:none"的区别</title></head><body><span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><span style="display:none; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><br/></body>
</html>
参考资料：
Html style="visibility:hidden"与style="display:none"的区别
这篇关于V-if与display:none的区别 （v-if v-show display:none visibility:hidden 辨析）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
