首页 > 其他分享 >v-if和v-show区别

v-if和v-show区别

时间:2022-11-22 11:34:36浏览次数:46  
标签:DOM 区别 切换 渲染 条件 show CSS

v-if和v-show的区别
v-if
1、v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2、v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

v-show
1、v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

总结:
相同点:

1、v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。
不同点:

1、v-if 有更高的切换开销,v-show 有更高的初始渲染开销
3、v-if 适合运营条件不大可能改变;v-show 适合频繁切换。
4、v-if 通过动态向DOM树增删DOM元素,v-show 设置display来进行隐藏
5、v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show 只是简单的基于 CSS 切换;
 如果需要非常频繁地切换,则使用v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

标签:DOM,区别,切换,渲染,条件,show,CSS
From: https://www.cnblogs.com/ljlp/p/16914606.html

相关文章

  • java中 implement和extends的作用和区别详细解释
    一、extends是继承类,implements是实现接口。类只能继承一个,接口可以实现多个。extends继承父类的时候可以重写父类的方法,也可以调用父类的非私有方法;implements实现接口......
  • 前端 堆、栈 概念和区别
    1.概念栈:先进后出,由操作系统自动分配释放,存放函数的参数值、局部变量值等。其操作方式类似于数据结构中的栈;是一种运算受限的线性表;堆:先进先出,动态分配的空间一......
  • React类式组件和函数式组件的区别
    React类式组件和函数式组件的区别有哪些呢?  主要要以下几个区别:(1)语法不同、设计思想不同(2)生命周期、状态变量(3)复用性:(4)优缺点一、语法不同、设计思想不同函数式组件......
  • ArrayList和LinkedList的区别和使用场景
    先看看接口关系1.ArrayList和LinkedList区别ArrayList是对象数组实现的,LinkedListed是基于双链表实现的。LinkedList的存储消耗较大,除了存储数据外还要有上下节点的......
  • MySQL_连接时where和and的区别
    内连接是从结果表中删除与其他被连接表中没有匹配行的所有行,on和where的效果一致 左外连接(on先执行,where后执行)and条件是在生成临时表时使用的条件,它不管on中的条件是......
  • 图文并茂解释开源许可证 GPL、BSD、MIT、Mozilla、Apache和LGPL的区别
    什么是开源许可证?(“OpenSourceLicense”) 首先需要明确的是,开源软件源代码的著作权既没有被放弃也没有过期,其修改和发行等仍然要受到著作权法或者开源软件许可证的制......
  • Flexbox 与 CSS Grid 两者之间有什么区别,我们应该如何使用它们?
    英文| https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951翻译|杨小爱刚开始编程时,我只知道如何使用flexbox。所以很自然地,我只使用了flexbox。我从不......
  • matplotlib 中的 figure/ax/plt的区别
    知其然也要知其所以然matplotlibhasanextensivecodebasethatcanbedauntingtomanynewusers.However,mostofmatplotlibcanbeunderstoodwithafairly......
  • PHP中self与static区别和联系
    ​ PHP官方也说过,大概意思是说self调用的就是本身代码片段这个类,static-PHP5.3加进来的只得是当前这个类,有点像$this的意思,static调用的是从堆内存中提取出来,访问的是当......
  • inline、inline-block和block区别
    与display:inline相比,主要区别在于display:inline-block允许在元素上设置宽度和高度。display:block,会进行换行操作。    ......