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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 免费大数据平台有哪些?

    免费大数据平台有哪些?

    2021年6月14日
    185
  • minicom指令_【教程】minicom使用教程

    minicom指令_【教程】minicom使用教程简介Linux下的Minicom的功能与Windows下的超级终端功能相似,可以通过串口控制外部的硬件设备.适于在linux通过超级终端对嵌入式设备行管理.同样也可以使用minicom对外置Modem进行控制.Minicom的配置第一次启动时:需对minicom进行配置:minicom-s启动出现配置菜单:+—–[configuration]——+|Filenamesand…

    2022年6月5日
    49
  • VMware安装CentOS7超详细版[通俗易懂]

    VMware安装CentOS7超详细版[通俗易懂]写在前面云计算与分布式这门课程的老师让我们使用vmware安装好centos7.6并配置好Java编译环境,刚好复习一波,下面是详细的安装过程。准备工作VMware,我用的是VMwareWorkstationPro15,下载与安装方法就不提了毕竟重点在后头。CentOS7镜像文件,由于7.6版本已经停更,这里我用的是7.7版本。下载地址http://isoredirect….

    2022年6月5日
    27
  • c语言入门教程–-13数组

    c语言入门教程–-13数组

    2021年3月12日
    184
  • 登录注册页面跳转_登录注册界面

    登录注册页面跳转_登录注册界面用HTML、jQuery和css写一个简单的登录注册页面看了一些前端部分的视频,有点手痒,想起大学时做的某管理系统的前端部分,当时基本都是靠着CV写的,现在想想应该可以自己写一点了。话不多说,先上图:首先是登录页面:点击注册按钮可以跳转到注册页面:注册页面做了一点简单的判断:伪非空验证:还有伪密码验证:红字提示存在两秒,两秒后消失,清除密码框内的内容,但是不清除用户名框内的文本。然后当用户名和密码输入正确以后(其实两次密码一样就行,用户名不空就好)就可以跳转到登录页面。这里有一个坑

    2025年7月3日
    5
  • DSL和配置_ds3配置

    DSL和配置_ds3配置为什么要用DSL呢?这个问题可以算DSL应用中第二重要的问题。第一问题是我前面的讨论过的什么应用是DSL适应的范围。首先我们应该承认,DSL不是最简明且易于理解的方法。我们来跟配置文件的方式比较一下。显然DSL在比较中会落败,因为至少对客户来说不存在语法的问题。DSL的运行效率也未必就很好,至少从配置的角度来说会如此。DSL的开放效率也未必就是最好的,因为很多场景下因为DS…

    2025年6月29日
    2

发表回复

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

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