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


相关推荐

  • Android IBinder的linkToDeath介绍及情景模拟

    最近查看Framework源码的时候,读到了AudioService处理音量的流程,在这里碰到了IBinder的linkToDeath()这个知识点,比较感兴趣,所以记录下来,并自己写demo尝试了一下。我们简单来看下AudioService处理静音这一块。/frameworks/base/media/java/android/media/AudioManager.javapublicclas

    2022年4月9日
    65
  • python的三方库_py第三方库有哪些

    python的三方库_py第三方库有哪些Python常用第三方库可以在ThePythonPackageIndex(PyPI)软件库(官网主页:https://pypi.org/)查询、下载和发布Python包或库。网络爬虫requests:https://pypi.org/project/requests/简洁且简单的处理HTTP请求的第三方库 scrapy:https://scrap…

    2022年10月14日
    7
  • 💡万万没想到!即梦AI生成不了的原因竟是这些?小白必看!

    💡万万没想到!即梦AI生成不了的原因竟是这些?小白必看!

    2026年3月13日
    2
  • killall使用

    killall使用Linux 系统中的 killall 命令用于杀死指定名字的进程 killprocesse 我们可以使用 kill 命令杀死指定进程 PID 的进程 如果要找到我们需要杀死的进程 我们还需要在之前使用 ps 等命令再配合 grep 来查找进程 而 killall 把这两个过程合二为一 是一个很好用的命令 1 命令格式 killall 参数 进程名 2 命令功能 用来结束同名的的所有进程 3 命令参数 Z 只杀死拥有 scontext 的进程 e 要求匹配进程名称 I 忽略

    2026年3月17日
    3
  • 3W原则[通俗易懂]

    3W原则[通俗易懂]目的:为了减少走线之间的电磁串扰。两个走线中心间距至少得大于3倍的线宽。用规则进行约束,但是规则用的两线之间的距离是边缘距离。因此规则设置的值应为10.8。(即线宽的两倍10.8=5.4X2)…

    2022年6月17日
    30
  • 实战elk搭建

    实战elk搭建一 ELK 分析对于 ELK 主要是分为 ElasticSearc Logstash 和 Kibana 三部分 其中 Logstash 作为日志的汇聚 可以通过 input filter output 三部分 把日志收集 过滤 输出到 ElasticSearc 中 也可以输出到文件或其他载体 ElasticSearc 作为开源的分布式引擎 提供了搜集 分析 存储数据的功能 采用的是 restful 接口的风格 Kibana 则是作为 ElasticSearc 分析数据的页面展示 可以进行对日志的分析 汇总

    2026年3月26日
    2

发表回复

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

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