V-if与display:none的区别（v-if v-show display:none visibility:hidden 辨析）

龙丨行

已于 2022-07-25 09:45:26 修改

阅读量3.3k

点赞数 9

分类专栏：工作中的小问题文章标签： vue

于 2021-04-02 09:50:02 首次发布

本文链接：https://blog.csdn.net/qq_33592641/article/details/115390880

版权

工作中的小问题专栏收录该内容

18 篇文章

订阅专栏

前言：网上有很多相似的内容，为啥我还再写一篇？因为那些文章千篇一律都说的是 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；视觉上消失，但是还占着位置。
visibility：hidden 虽然看不到，还是位置还占着

display:none；视觉上消失，也不占位置，但Dom节点还在。
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>