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


相关推荐

  • endnote修改参考文献格式为方括号(参考文献)

    Endnote修改参考文献格式1将参考文献除编号外的内容设置左对齐:1)菜单栏Edit-Outputstyles-选择一个要更改的参考文献格式进行更改2)弹出页面内选中Bibliography下的Layout![右上角Incertfield位置添加tab,右下角HangingIndent位置选择Allparagraphy]3)在word中endnote下点击箭头处更改缩进大小最终结果如图…

    2022年4月10日
    3.8K
  • 其实Unix很简单

    很多编程的朋友都在网上问我这样的几个问题,Unix怎么学?Unix怎么这么难?如何才能学好?并且让我给他们一些学好Unix的经验。在绝大多数时候,我发现问这些问题的朋友都有两个特点:1)对Unix有

    2021年12月27日
    38
  • Q学习(Q-learning)简单理解「建议收藏」

    Q学习(Q-learning)简单理解「建议收藏」第1节Q-learning逐步教程本教程将通过一个简单但又综合全面的例子来介绍Q-learning算法。该例子描述了一个利用无监督训练来学习未知环境的agent。假设一幢建筑里面有5个房间,房间之间通过门相连。我们将这五个房间按照从0至4进行编号,且建筑的外围可认为是一个大的房间,编号为5。房间结构如下图:上图的房间也可以通过一个图来表示,房间作为图的节点,两个房间若有门相连,则相应节点间对应一条边如图2所示图2房间结构对应的图第2节Q-learning手工推演…

    2022年10月3日
    2
  • latex中参考文献怎么弄进去_论文中的参考文献怎么标注右上角

    latex中参考文献怎么弄进去_论文中的参考文献怎么标注右上角参考文献常见问题集1.请问如何将参考文献的计算器置零,然后再计数,格式大致是这样:1文12文2…1文12文2我是这样实现的:beginthebibliography99endthebibliography……beginthebibliography9999endthebibliography我的文本实在ScienticWorkplace中编辑的,建议你也使用这个软件,很…

    2025年10月14日
    2
  • 串口调试助手(CM野人版)4.0有严重Bug,已经跟作者反应,等候更新

    串口调试助手(CM野人版)4.0有严重Bug,已经跟作者反应,等候更新这个软件,看起来很漂亮,能任意设置波特率,支持921600波特率,看起来很华丽。但最近发现其一个严重的Bug:版本就是4.0我打印了一些信息:能正常显示。我把这些打印的代码行给注释了,依然能打印出来,见鬼了。然后我重启电脑,问题消失,不再打印注释过的代码行。我换了别的串口助手,问题消失。所以一定是这个助手的问题。基础的调试软件出问题,非常不易发现,带来的损失非常大。建

    2022年5月8日
    85
  • Python里面数组拼接方法介绍

    Python里面数组拼接方法介绍numpy数组拼接方法介绍转载来源:https://blog.csdn.net/zyl1042635242/article/details/43162031数组拼接方法一思路:首先将数组转成列表,然后利用列表的拼接函数append()、extend()等进行拼接处理,最后将列表转成数组。示例1:>>>importnumpyasnp>>&g…

    2022年5月5日
    808

发表回复

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

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