v-if 与 v-show(vue3条件渲染)

v-if 是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做------直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多------不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

注意,v-show 不支持 <template> 元素,也不支持 v-else。

  • v-show 不支持 <template> 元素,因为 <template> 元素不会被渲染到最终的 DOM 中,而 v-show 是通过修改 DOM 元素的 CSS 来控制可见性的。
  • v-show 也不支持 v-else,因为 v-show 只是简单地切换元素的可见性,而不是像 v-if 那样根据条件来选择性地渲染不同的元素或组件。

v-show是控制可见性,v-if是真正的条件渲染

相关推荐
毕设源码-邱学长4 分钟前
【开题答辩全过程】以 个性化新闻推荐系统为例,包含答辩的问题和答案
java
a程序小傲11 分钟前
京东Java面试被问:ZGC的染色指针如何实现?内存屏障如何处理?
java·后端·python·面试
vx_bisheyuange24 分钟前
基于SpringBoot的老年一站式服务平台
java·spring boot·后端·毕业设计
计算机毕设VX:Fegn089536 分钟前
计算机毕业设计|基于Java + vue水果商城系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·课程设计
周杰伦_Jay37 分钟前
【 Vue前端技术详细解析】目录结构与数据传递
前端·javascript·vue.js
TH_143 分钟前
2、前台工程使用代理,请求后台失败
java
川贝枇杷膏cbppg1 小时前
DmServiceDMSERVER.log是干嘛的
java·服务器·数据库
无敌最俊朗@1 小时前
Qt 多线程编程: moveToThread 模式讲解
java·开发语言
!停1 小时前
深入理解指针(4)
开发语言·javascript·ecmascript
A24207349301 小时前
JavaScript学习
前端·javascript·学习