v-show 和 v-if 的区别

Vue.js 指令详解：v-if 与 v-show 的性能对比
最新推荐文章于 2022-11-18 00:30:00 发布
原创 最新推荐文章于 2022-11-18 00:30:00 发布 · 353 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细探讨了Vue中v-if和v-show的异同，包括它们的实现原理和性能差异。v-if通过条件编译实现DOM的增减，适合不频繁切换的情况，而v-show通过CSS控制显示隐藏，适用于频繁切换且初始化渲染成本较高的场景。在实际开发中，根据需求选择合适的指令能有效提升应用性能。

v-show 和 v-if 的区别


• 相同点：v-show 和 v-if 都能控制元素的显示和隐藏

• 不同点：
1、实现本质方法不同

  • v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏
  • v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

2、性能

  • v-if 有更高的切换消耗（安全性高）
  • v-show 有更高的初始化的渲染消耗（对安全性无要求选择）

• 总结：如果要频繁切换某节点时，使用 v-show（无论 true 或者 false 初始都
会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销
较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false
时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，
因此初始渲染开销较小，切换开销比较大）

v-if 和 v-show 的区别是什么，该如何选择？
qq_38822390的博客
03-14 788
在 Vue.js 中，v-if和v-show是两个非常重要的指令，用于控制元素的渲染和显示。这两个指令虽然都可以实现条件渲染，但它们的工作原理和使用场景却截然不同。了解它们的区别及何时使用它们对开发者来说至关重要。
v-if与v-show二者性能比较
喵大嗷的博客
07-23 8580
先来说说v-if v-if:根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会克隆相应元素到DOM中 支持加在<template>标签上 再说说v-show v-show是根据表达式的值来显示或者隐藏元素，根据的是display的值 不支持加在<template>标签上 划重点 在切换v-if的时候，vue内部有一个局部...
v-if和v-show的区别
hyy_20021212的博客
11-15 275
v-show是通过控制元素的样式属性display的值来完成显示和隐藏的。v-show是在初次渲染时（特别是DOM元素刚开始不显示的时候）。v-if是通过创建和删除DOM的方式来完成显示和隐藏的，v-show使用在（显示和隐藏）切换不频繁的场景的。v-if使用在（显示和隐藏）切换不频繁的场景的，v-if消耗性能体现在切换时，v-show安全性不好。首先它两都是控制DOM元素的显示和隐藏的。
前端常见内存泄漏及解决方案总结
lpq1201的博客
01-31 1491
##引起内存泄漏的原因 意外的全局变量 由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。 未声明变量 function fn() { a = 'global variable' } fn() 使用 this 创建的变量(this 的指向是 window)。 function fn() { this.a = 'global variabl
v-show 和 v-if 异同
qq_42972756的博客
08-02 279
看到其他博主写的，敲下来记录一下给自己看。 原代码出处https://blog.csdn.net/weixin_44103733/article/details/88881012
vue项目中 v-if和v-show的区别最全解析
happy81997的博客
05-15 1万+
vue项目中 v-if和v-show的区别最全解析 vue项目中有时候需要控制“条件渲染”，很多时候都是通过v-if或者v-show来控制的，有关二者的区别我想很多人都知道，但是最近做项目发现项目组中不少同志都搞不清，几乎都是乱用，出了问题，还判断不出来问题出在哪里。现在就简单讲讲这两个东西的区别。 一、功能区别 两个都能实现控制显示和隐藏，但是本质上有巨大的区别： 1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
深入理解vue.js中的v-if和v-show
12-02
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点 都是动态显示DOM元素 2.区别 （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-...
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
实例讲解v-if和v-show的区别
12-29
代码： <!DOCTYPE html> <... <head>... <div v-if=isIf>v-if <div v-show=ifShow>v-show <button @click=toggleShow()>点击按钮</button> </body> [removed]</scrip
v-if 和 v-show的区别有哪些以及何时使用
SYQ15544423296的博客
09-05 1180
目开发时什么时候使用v-show，什么时候使用v-if，两者有什么区别
v-if和v-show相对比的异同之处
weixin_45096939的博客
11-18 365
v-if和v-show都是控制元素的显示与隐藏，他两有一个本质的区别：v-if 是让这个dom 存在与不存在的问题，而v-show这个dom一直存在，只是display控制显示与不显示，v-show有点像tabs的切换。v-show则无论初始条件是否成立，都会渲染标签，它只会控制元素的显示与隐藏。1.因为v-if会对dom进行创建和销毁操作，而v-show不会，所以相比来说v-if的开销会比v-show大；v-show适合频繁切换的场景，v-if适合不需要频繁切换的场景。
Vue面试题 v-show 与 v-if 有什么区别？
weixin_55472979的博客
07-03 221
相同点： v-show和 v-if都是 控制 dom元素的显示和隐藏的。 不同点： 1、实质本质方法不同： v-show是通过控制元素的样式属性display的值，来完成显示和隐藏； ​ v-if是通过对dom元素的添加和删除，完成显示和隐藏 2、使用场景：由原理（做法）得出使用场景的区别 v-show：使用在dom元素频繁切换的场景 ​ v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。 3、性能 v-if:有更高的切换消耗（安全性高） v-show:有...
vue使用v-if时的注意点
热门推荐
挥别了青春的博客
07-12 5万+
v-if和v-else或v-else-if之间不能添加其他元素。   以下是错误事例&lt;span v-if="type==1"&gt;错误示范&lt;/span&gt; &lt;span&gt;哈哈哈&lt;/span&gt; &lt;p v-else&gt;嘿嘿嘿&lt;/p&gt;以下是正确实例&lt;span v-if="type==1"&gt;正
vue中v-if和v-show的区别和使用以及其多次渲染div元素时闪现问题的解决
weixin_40089454的博客
04-03 1285
v-if 和 v-show区别： v-if是将元素添加或者移除dom树模型中，v-show只是在这个属性上添加display：none； v-if 切换消耗、安全性高；v-show初始消耗大一点，若频繁切换，且安全性要求不高可以使用v-show；若运行起来，条件不更改，v-if更好； v-if v-show 出现div闪现 在页面层次结构，数据较多的时候，用v-if或者v-show就会出现di...
vue学习笔记
qq_36333315的博客
04-17 300
一 ： v-if作用 ： 判断是否加载固定的内容，如果为真，就加载，否则不加载用处 : 用在权限管理，页面加载语法 : v-if="判断表达式"特点 : 控制元素插入或删除，而不是隐藏（v-show是隐藏）v-if与v-show的区别 :v-if的安全级别更高，v-show只是隐藏了，通过页面源代码还是可以看到，安全级别低、v-if更高的切换消耗（切换消耗指从未加载到加载或者从加载到未加载的状况，...
Vue学习系列（十）：Vue的v-if和v-show指令
千里之行，始于足下
06-07 826
在Vue中，v-if可以进行boolean值判断，如果值为true，则渲染DOM结构，如果为false，则不会渲染DOM结构。
v-if 与 v-show的区别及对生命周期的影响
SpringRolls的博客
05-23 1973
两者的区别 (1) v-if 的原理是根据判断条件来动态的进行增删DOM元素，只有v-if的值为true时,元素才会存在于html页面中； v-show是根据判断条件来动态的进行显示和隐藏元素，是通过修改DOM元素的display属性来实现的，无论v-show的值为true或者false,元素都会存在于html页面中。 (2) 只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断 (3) 如果需要非常频...
v-if 和v-show的区别
久念☆的博客
06-10 6445
v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染，为true是渲染（dom存在），为false时不存在（dom不存在） 1、v-if有更高的切换开销，v-show有更高的初始渲染开销。 如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。 2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。 所以当程序不是很大时候
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值