跳到主要内容

v-if 和 v-show 的介绍

v-if​

v-if 是判断某一个元素是否存在于 DOM 节点上。

例如 👇

20230301150946

通过上面的例子不难发现，v-if 判断条件不成功的情况下，元素是不会被挂载在 DOM 节点上的。

v-show​

v-show 是决定一个在 DOM 上的元素，是否显示。

20230301151014

看上面的截图可以发现，v-show 判断不成功的情况下，元素是依然挂载在 DOM 节点上的。只是多加了一个“display:none”属性而已。

v-if 和 v-show 的区别

其实这不是一个什么难题，看了上面的例子不难发现。他们的区别其实就是：

v-if 是决定元素是否需要生成在 DOM 节点树上。而 v-show 所判断的元素是一定在节点树上的，v-show 只能决定这个元素是否被显示（换言之，v-show 就是决定 display 的值是否为 none）

在不同情况下合理使用 v-if 和 v-show

在什么情况下使用 v-if ?​

当你的一个元素需要进行 v-if 的判断次数不高的时候（小于 3 次）的时候，比如，在初始化显示的时候。很少去触发 v-if。只判断 1 次 2 次就不会去判断的，那么就用 v-if,让这个元素不必挂载在 DOM 上，减小 DOM 压力。

但是当我们一个元素需要频繁的出现和消失时候 （比如闪烁效果），这个时候使用 v-show 的效果会更好。因为在 DOM 上增删节点，是需要一定成本的，而这个成本相对于添加 display 这个属性来说，要更高。在频繁的增删 DOM 节点和频繁的修改 display 中，明显后者的成本更低。

结论

  • v-if 决定被判断元素是否挂载于 DOM 节点上
  • v-show 决定被判断元素是否添加 display:none
  • 在需要频繁显示/隐藏某一个元素的情况下，使用 v-show,而当元素显示/隐藏的频率较少的时候，则使用 v-if。
信息

作者：工边页字 链接：https://juejin.cn/post/7106708714312171528 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。