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是真正的条件渲染

相关推荐
众拾达人2 分钟前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言
皓木.4 分钟前
Mybatis-Plus
java·开发语言
不良人天码星4 分钟前
lombok插件不生效
java·开发语言·intellij-idea
守护者17025 分钟前
JAVA学习-练习试用Java实现“使用Arrays.toString方法将数组转换为字符串并打印出来”
java·学习
源码哥_博纳软云27 分钟前
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
禾高网络28 分钟前
租赁小程序成品|租赁系统搭建核心功能
java·人工智能·小程序
学会沉淀。34 分钟前
Docker学习
java·开发语言·学习
如若12335 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
初晴~1 小时前
【Redis分布式锁】高并发场景下秒杀业务的实现思路(集群模式)
java·数据库·redis·分布式·后端·spring·
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js