vue中v-if和v-show的区别

学习前端的渣渣

已于 2023-06-26 16:19:23 修改

阅读量147

点赞数

分类专栏：前端面试题 vue 文章标签： vue.js 前端 javascript

于 2022-09-02 22:59:34 首次发布

本文链接：https://blog.csdn.net/fangqi20170515/article/details/126671661

版权

前端面试题同时被 2 个专栏收录

103 篇文章 2 订阅

订阅专栏

vue

45 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中v-if和v-show的差异。v-if通过实际的DOM操作控制元素的显示，而v-show则是利用CSS的display属性。v-if在条件不满足时不进行编译，适合条件不大可能改变的情况；v-show则始终编译并缓存，适用于频繁切换的场景。v-if可以用于template标签，但v-show不能。在表格中控制列显示，v-show无效，需用v-if。

摘要由CSDN通过智能技术生成

两则都是控制元素是否在页面上显示；

不同点	v-if	v-show
手段	是组件真正的渲染和销毁，`动态`控制元素的`添加和删`除	通过控制css的`display属性`来控制是否在页面显示。DOM元素不会消失，一直存在
编译过程	切换有一个局部编译/卸载的过程，切换过程中合适的销毁或重建内部的时间监听和子组件	只是简单的基于css的切换
编译条件	v-if是惰性的，若条件为false，则不做任何处理，若`为真，才开始局部编译`；	v-show在`任何条件下，都会编译`，然后被缓存，而且dom元素保留
性能消耗	有更高的`切换消耗`	有更高的`初始渲染消耗`
应用场景	适合使用在条件不大可能改变的情况下	适合频繁切换

注意：

v-if可以在template标签上使用，而v-show不能。因为 v-show 是通过 display 来控制标签进行渲染的，但是 template 标签在 vue 解析后是不会显示在页面上的，是虚拟 Dom，所以无法使用 v-show，但是 v-if 是可以使用在 template 标签上，因为 v-if 是条件渲染，只要满足 v-if 后的条件就可以完成渲染。
在表格中，控制el-table-column显示与隐藏使用v-show无效，需要使用v-if。