v-if与v-show的区别

v-if与v-show的区别相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。都修改为false后,第一个div是直接被移除掉了需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。…

大家好,又见面了,我是你们的朋友全栈君。

相同点:v-if与v-show都可以动态控制dom元素显示隐藏

不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。

v-if与v-show的区别

都修改为false后,第一个div是直接被移除掉了

v-if与v-show的区别

需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。原因是显示隐藏切换,只是会修改element style为display:””或者display:none,并不会覆盖掉或修改已存在的css属性。

v-if与v-show的区别

 

更详细的区别这里直接引用Young Dreamer的博客内容

1.手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/147179.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月13日 下午9:16
下一篇 2022年6月13日 下午9:16


相关推荐

  • 如何安装OpenManus?手把手教你安装OpenManus

    如何安装OpenManus?手把手教你安装OpenManus

    2026年3月15日
    3
  • vm安装centos7蓝屏「建议收藏」

    vm安装centos7蓝屏「建议收藏」vm安装centos7蓝屏最近有同学购买了最新款英特尔11代的笔记本,使用vm安装centos7系统

    2026年4月14日
    6
  • 我们可以使用命令kill来结束Linux系统下运行的进程(kill强制杀死进程)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志。首先使用ps-ef命令确定要杀死进程的PID,然后输入以下命令:#kill–pid注释:标准的kill命令通常都能达到目的。终止有问题的进程,并把进程的资源释放给系统。然而,如果进程启动了子进程,只杀死父进程,子进程仍在运行,因此仍消耗资源。为了防止这些所谓的“僵尸进程”,应确保在杀死父进程之前,先杀死其所有的子进程。确定要杀死进程的PID或PPID#ps-ef|grephttpd以优雅的方式结束进

    2022年4月16日
    83
  • JavaScript专题(五)深浅拷贝

    JavaScript专题(五)深浅拷贝了解拷贝背后的过程 避免不必要的错误 1 介绍浅拷贝 2 介绍深拷贝 3 实现浅拷贝 4 实现深拷贝 Js 专题系列之深浅拷贝 我们一起加油

    2026年3月20日
    2
  • Android Hook 机制之简单实战[通俗易懂]

    Android Hook 机制之简单实战[通俗易懂]简介什么是HookHook又叫“钩子”,它可以在事件传送的过程中截获并监控事件的传输,将自身的代码与系统方法进行融入。这样当这些方法被调用时,也就可以执行我们自己的代码,这也是面向切面编程的思想(AOP)。Hook分类1.根据Android开发模式,Native模式(C/C++)和Java模式(Java)区分,在Android平台上Java层级的Hook;…

    2022年6月4日
    55
  • 【软件测试】初级软件测试面试题!建议收藏!史上最强!

    【软件测试】初级软件测试面试题!建议收藏!史上最强!初级软件测试面试题 1 请描述如何划分缺陷与错误严重性和优先级别 给软件缺陷与错误划分严重性和优先级的通用原则 1 表示软件缺陷所造成饿危害和恶劣程度 2 优先级表示修复缺陷的重要程度和次序 严重性 1 严重 系统崩溃 数据丢失 数据毁坏 2 较严重 操作性错误 结果错误 遗漏功能 3 一般 小问题 错别字 UI 布局 罕见故障 4 建议 不影响使用的瑕疵或更好的实现

    2026年3月27日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号