Vue.js 中 v-if 和 v-show 有什么区别？

最新推荐文章于 2024-03-15 09:51:58 发布
最新推荐文章于 2024-03-15 09:51:58 发布
阅读量445 收藏
点赞数
分类专栏： vue vue学习总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35844177/article/details/59483426
版权

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低。具体解释如下：

v-show 渲染页面结构后，通过 "display:none" 控制元素状态。所以初始化时间较长。

v-if 是懒计算，如果条件为false，它什么也不做，加载速度较快。当条件为真时，v-if 才会真正编译渲染页面结构。因此，v-if 切换复杂组件的花销要比 v-show 大得多。

所以要根据实际场景决定使用哪个指令。

小黑ii
关注
专栏目录
Vue中的v-show 与 v-if 有什么区别？
ni15534789894的博客
01-13 377
v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进⾏切换。所以，v-if 适⽤于在运⾏时很少改变条件，不需要频繁切换条件的场景；v-show则适⽤于需要⾮常频繁切换条件的场景。 ...
Vue 中 v-if 和 v-show 有什么区别？
fe_watermelon的博客
08-14 733
大家好，我是前端西瓜哥。今天来学习下 Vue 中 v-if 和 v-show 的区别。
Vue中v-if和v-show的区别是什么？
GZZ__z的博客
11-05 1816
在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染，而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。 v-if和v-show都是通过判断绑定数据的true\false来展示的 一，Vue中“v-if”和“v-sh”的主要区别是： 1、“v-show”只编译一次；而“v-if”不停地销毁和创建 2、“v-if”更适合于带有权限的操作，渲染时判断权限数据 3、v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作 二，本质的区别： vue-sho.
深入理解vue.js中的v-if和v-show
12-02
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点 都是动态显示DOM元素 2.区别 （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-...
vue.js使用v-if实现显示与隐藏功能示例
10-18
在实际开发中，还可以配合`v-else`和`v-else-if`来实现更复杂的逻辑判断，或者与`v-show`指令一起使用，`v-show`虽然也能实现类似的隐藏和显示功能，但它并不像`v-if`那样销毁和重建DOM元素，而是通过CSS的`display`...
Vue.js使用v-show和v-if的注意事项
10-20
在Vue.js的官方文档中，对v-if和v-show的描述是：v-if指令在切换过程中，对包含的模板进行了局部编译/卸载的过程，这是因为v-if所控制的DOM内可能包含有数据绑定或子组件。v-if是通过条件的真假来进行真实的条件渲染...
v-if 和 v-show 有什么区别？
mumu1998的博客
09-17 371
这次咋们讲讲v-if 和v-show之间的区别？它们在使用的时候究竟有什么不同之处呢 简单来说 v-if的初始化快，v-show的初始化慢 但是它们的共同点是： 都是动态显示DOM元素。 v-if：若值为false，那么页面将不会有这个html标签生成，v-if只有当满足条件是才会编译。 v-show：不论其值是false还是true，html元素都会存在，只是简单的切换c...
Vue中条件渲染v-if和v-show有什么区别
weixin_38289787的博客
12-19 238
v-if <body> <div id="app"> <div v-if="isShow"> helllo Vue </div> <template v-if="isShow"> <p>hello world</p> <div>hello shimao...
Vue中v-if和v-show的区别
weixin_75189998的博客
02-07 107
共同点：都是条件渲染 不同点： v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。 因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。 v-show本质是在控制元素的 css 样式,display: none; 一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。
Vue中v-if与v-show之间的区别
weixin_49136697的博客
09-26 133
v-if 1.条件性渲染某块内容，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.v-if是惰性的，如果在初始渲染时条件为假，他就什么也不做，直到条件第一次变为真的时候，才会渲染条件块。 3.有条件分支语句v-else和v-else-if。 4.可以使用在template中。 5.v-if的切换开销高。 6.条件很少改变时，使用v-if比较好。 v-show 1.不管初始条件是真是假，元素总会被渲染，并且只是简单的基于css进行切换 当满足条件时-display：block； 当不满
Vue v-if 和 v-show的区别
最新发布
lfl18326162160的博客
03-15 498
是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。不管初始条件是什么，元素总是会被渲染。的时候不会触发组件的生命周期。有更高的初始渲染消耗；要复杂的多，因为还有。
v-if和v-show区别
donghua-li的博客
10-22 3780
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title></head> <body> <div id="app"> <div v-if="isIf">v-if</div> <div v-show="ifShow">v-show</div>
v-if与v-show的区别
热门推荐
weixin_58155690的博客
07-04 1万+
v-if与v-show的区别
vue中v-if和v-show有什么区别？
从头再来呀
07-18 533
两个都是让元素不可见。但是两个选项有区别 v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大 v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签 项目中如何使用？ 当初始条件为假时，v-show初...
v-if 和 v-show 的区别
最爱喝怡宝的博客
11-15 366
v-if 和 v-show 只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态 那么这两者之间的区别在于哪里呢 <div id="app"> {{flag}} <br> <input type="button" value="点击隐藏" @click="flag=!flag"> <h2 v-if="flag">123</h2> <p v-show=
vue.js中v-if和v-show指令有什么区别
06-09
在Vue.js中，v-if和v-show都是用于控制DOM元素的显示和隐藏的指令，但它们的实现方式和使用场景有所不同： 1. v-if是动态地添加或移除元素，当条件为false时，元素会被完全移除，当条件为true时，元素会被重新添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黑ii

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值