Vue指令v-if和v-show的区别

最新推荐文章于 2024-07-10 14:44:10 发布

穷途未末路

最新推荐文章于 2024-07-10 14:44:10 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/qq_42138581/article/details/82686667

版权

共同点：

都是用来控制DOM元素的显示与隐藏的

区别：

（1）v-if指令是动态的创建和删除DOM的元素节点，条件为false时，编译后我们在浏览器中看到代码是不存在的。

而v-show的实际情况是通过css代码来控制该元素的显示与隐藏，也就是display：none；display：block

（2）v-if多用于切换状态不频繁情况，频繁的创建和删除节点是比较耗性能的；v-show初次渲染代价高，实用于显示隐藏切换较频繁的时候

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

穷途未末路

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue知识点一：v-show和v-if指令的共同点和不同点？

HUMM

01-27

1622

v-show和v-if指令的共同点和不同点？ 1.共同点用来控制DOM元素的显示或隐藏 2.区别原理： v-show指令：通过控制css中的display设置为none，控制隐藏或显示；元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏。 v-if指令：v-if是动态的向DOM树内添加或删除DOM元素；满足条件是会渲染到html中，不满足条件时

Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

10-17

总结来说，Vue的`v-if`、`v-show`和插值表达式可能导致的闪现问题主要是由于HTML先于JS编译而产生的。通过预设隐藏样式和利用`v-cloak`指令，我们能够确保在Vue完成编译前元素保持隐藏状态，从而消除闪现现象。Vue....

参与评论您还未登录，请先登录后发表或查看评论

Vue2.5笔记：v-if，v-show指令

六小登登的专栏

10-08

297

熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来...

Vue2中的v-show OR v-if的区别

热门推荐

一夜枫林

07-20

1万+

1.共同点：都能控制元素的显示和隐藏。 2.不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。 3.总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。 v-show 使用：（v-show使用方法有几种，我这写一

v-show和v-if指令的共同的和不同点？

weixin_66557048的博客

03-14

326

v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分。我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）v-if 与 v-show 都能控制dom元素在页面的显示。

v-show 和 v-if 指令的共同点和不同点 ?(详细)

m0_56892470的博客

07-04

1585

1）相同点： v-show 和 v-if 都能控制元素的显示和隐藏。2）不同点：实现本质方法不同 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 3）编译的区别 v-show 其实就是在控制 css v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 4）编译的条件 v-show 都会编译，初始值为 false，只是将 displa

Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

10-17

在Vue框架中，v-if和v-else-if是条件渲染指令，用来根据表达式的真假来决定是否渲染某个元素。然而，在页面加载时，有时候会出现页面内容闪现的现象，即不满足条件的元素暂时显示出来，然后消失。这个问题主要是由于...

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

10-17

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下

vue2和vue3的v-if与v-for优先级对比学习

10-14

在这篇文章中，我们将深入探讨Vue 2.x和Vue 3.x中v-if和v-for这两个关键指令的优先级差异，以及如何在实践中更好地利用它们。首先，v-if和v-for都是Vue中的条件指令，但它们的作用不同。v-if用于条件渲染，只有当...

在vue中使用el-tab-pane v-show/v-if无效的解决

10-15

`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...

v-show和v-if指令的共同点和不同点

weixin_42095178的博客

01-28

354

使用场景：如果要频繁切换某节点时，使用v-show（无论是true还是false初始值都会进行渲染，因此通过css来控制显示隐藏，因此切换开销比较小，初始值开销比较大），如果不需要频繁切换某个节点时，使用v-if（因此懒加载，初始值为false）。2.不同点：v-show通过css的display：none，display：block，控制显⽰隐藏v-if是动态的向DOM树内添加或者删除DOM元素，v-if的销毁和创建⽐较消耗性能。编译的区别：v-show就是控制CSS；两者都能控制元素的显示和隐藏。

Vue中v-show 和 v-if指令的共同点和不同点

xhtlyz的博客

08-20

670

1、相同点 v-show 和 v-if 都能控制元素的显示和隐藏。 2、不同点 2.1）实现本质方法不同 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 2.2）编译的区别 v-show 其实就是在控制 css v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 2.3）编译的条件 v..

v-if与v-show的共同点与不同点

weixin_58089129的博客

11-05

332

区别 1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件

v-show 和v-if指令的共同点和不同点

m0_60695310的博客

09-15

1085

一，相同点：两者都是控制元素的显示和隐藏，初始值都是false 二，不同点： 1，实现本质方法本质不同 v-show本质就是通过设置css中的display设置为none,控制隐藏 v-if是动态向DOM树添加和删除DOM元素 2，编译的区别 v-show 就是控制CSS v-if 切换有一个局部编译和卸载的过程，切换过程中合适地销毁和重建内部事件 3，编译的条件 v-show 会编译，但是只编译一次，后面其实就是控制css，注意点：当css本身就有dislpay：none时，v.

[vue小知识] v-show 和 v-if 指令的共同点和不同点?

weixin_58726419的博客

11-07

394

1. 相同点： v-show 和 v-if 都能控制元素的显示和隐藏。 2. 不同点：实现本质方法不同 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 3. 性能比较 v-show 只编译一次，后面其实就是控制 css，因此切换开销比较小，初始开销较大而 v-if 不停的销毁和创建,因此初始渲染开销较小，切换开销比较大 4.适用场景如果要频繁切换...

Vue中v-if和v-show区别

06-09

`v-if` 和 `v-show` 都是 Vue 中用于控制元素显示隐藏的指令，但它们的使用场景和实现方式略有不同。 `v-if` 指令的作用是根据表达式的值的真假条件来销毁或者重新创建元素及组件。当表达式的值为 false 时，元素会...