vue中v-if和v-show的区别

最新推荐文章于 2024-06-27 20:06:34 发布

牛长犇

最新推荐文章于 2024-06-27 20:06:34 发布

阅读量1.6w

点赞数 5

分类专栏： vue vue及其生态圈学习文章标签： v-if v-show vue

本文链接：https://blog.csdn.net/wxl1555/article/details/76594134

版权

vue及其生态圈学习同时被 2 个专栏收录

36 篇文章 8 订阅

订阅专栏

vue

26 篇文章 3 订阅

订阅专栏

欢迎访问我的个人博客 http://xiaolongwu.cn/

相同点

两者都是在判断DOM节点是否要显示。

不同点

1、实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

2、编译过程

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 

v-show只是简单的基于css切换；

3、编译条件

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

4、性能消耗

v-if有更高的切换消耗，不适合做频繁的切换；

v-show有更高的初始渲染消耗，适合做频繁的额切换；

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牛长犇

关注关注

5
点赞
踩
26

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue项目页面一闪一闪的问题解决办法（v-if闪屏、花括号闪屏）

qq_37635012的博客

01-16

1132

今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值，最开始我是用的v-if与v-else就会导致页面一闪一闪的，这是因为销毁dom元素后导致的闪屏，于是换成v-show来解决了这个闪屏问题。

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

10-17

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

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

v-if 和 v-show区别

a378113472的博客

08-30

274

1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存...

VUE笔记

最新发布

Gou_Hao_Liang的博客

06-27

635

v-show="布尔值" true-显示，false-隐藏控制标签的display属性，显示和隐藏标签，效率高 v-if="布尔值" true-显示，false-隐藏会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合。一、创建一个vue-cli默认项目或者vue3-cli默认项目，学习前期建议使用vue-cli默认项目创建后会进行下载，需要等待一段时间。vue.js 是一个js框架，不是代替js的，是对js进行封装。vue-cli官方提供的脚手架，

v-show 和 v-if 的区别

大白的博客

12-28

391

v-show 和 v-if 的区别共同点都是用来控制元素的显示与隐藏的不同点 V-show是对class样式切换；v-if是对Dom元素切换；频繁切换用v-show，切换消耗小，反之用v-if，运行条件很少改变，那为什么建议控制v-if 的使用 v-if是真正意义上的“条件渲染”。符合条件就渲染，否则不渲染DOM，浏览器中找不到这个DOM。 v-show严格意义上说“条件隐藏”。浏览器首先把HTML元素先渲染出来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那

【Vue指令】—v-if、v-show二者用法及区别

2401_84138890的博客

04-12

2022

v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏,它拥有比较高的初始渲染消耗。v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果。v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块。使用v-show指令，当指令是true时就显示，是false就隐藏。

Vue中，v-show与v-if的区别

hero_th的博客

12-20

717

v-show 根据表达式的真假，切换元素的显示与隐藏 <div id="app"> <img src="地址" v-show="true"> <img src="地址" v-show="isShow"> <img src="地址" v-show="age>=18"> </div> var app = new Vue({ el:"#app", data:{ isShow:false,

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

10-17

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

vue使用v-if v-show页面闪烁,div闪现的解决方法

10-17

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧

v-if 和 v-show 的区别

weixin_45608414的博客

02-09

149

v-if 和 v-show 的区别

vue之v-show和v-if详解

春风化雨

12-11

5628

一、v-show与v-if的共同点我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的 <Model v-show="isShow" /> <Model v-if="isShow" /> 当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置二、v-show与v-if的区别控制手段不同编译过程不同编译条件不同控制手段：v-sh...

使用v-if或v-show加载页面时出现闪烁

HQXQ2874760112的博客

04-19

3768

我是使用v-if判断是否加载一个下拉菜单的选项： <el-menu-item index="2" v-if="this.name=='root'" > 然后在页面加载及页面刷新时，在不符合条件的情况下，这个选项会出现然后消失，就是闪烁的出现一下。然后我查找的很多办法，比如使用v-cloak，但是都不行。之后我思考会不会是因为要判断this.name=='root'这个条件的原因，导致先显示后来才消失，于是我新建一个boolean变量，默认为false。 data(){

v-show和v-if

weixin_53726009的博客

08-03

190

在使用vue的过程中出现了v-show失效的情况，来探讨一下为什么？综上，如果需要频繁切换元素的可见性，且涉及到大量元素节点的渲染和销毁操作，建议使用v-show。而如果需要在条件变化时，动态创建或销毁元素节点，建议使用v-if。

vue里面v-if和v-show的区别

jsmylo的博客

03-27

657

面试高频：vue里面v-if和v-show的区别

Vue之v-if与v-show的区别

Radom&7

11-04

973

v-if与v-show的区别 v-if的显示和隐藏实在dom里创建和消除dom节点 v-show是用css样式的display来控制dom节点的显示和隐藏例子: <div id="root"> <div v-if="isOk">{{content}}</div> <div class="button" @click="tog

vue中v-if和v-show的区别详解

weixin_47190975的博客

07-28

339

v-if和v-show详解

vue中 v-if，v-show使用和区别

weixin_40499698的博客

10-31

750

文章目录vue中 v-if，v-show使用和区别 vue中 v-if，v-show使用和区别 1.v-if 和 v-show使用代码如下（html）： <div id="app"> <h3 v-if="isShow1">显示1</h3> <h3 v-if="isShow2">显示2</h3> <h3 v-show="show1">show1</h3> <h3 v-show="sho

面试题38：v-if与v-show的区别和适用场景

qq_51066068的博客

06-08

973

v-if与v-show的区别和适用场景

Vue中v-if和v-show区别

06-09

`v-if` 和 `v-show` 都是 Vue 中用于控制元素显示隐藏的指令，但它们的使用场景和实现方式略有不同。 `v-if` 指令的作用是根据表达式的值的真假条件来销毁或者重新创建元素及组件。当表达式的值为 false 时，元素会被销毁并从 DOM 中移除，当表达式的值为 true 时，元素会被重新创建并添加到 DOM 中。这种方式在不需要频繁切换元素显示状态的情况下，能够有效减少 DOM 的渲染次数，提高性能。 ```html <template> <div> <span v-if="show">我是一个v-if指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` `v-show` 指令的作用是根据表达式的值的真假条件来控制元素的显示或隐藏。当表达式的值为 false 时，元素会被隐藏，并且不会从 DOM 中移除，当表达式的值为 true 时，元素会被显示。这种方式适用于需要频繁切换元素显示状态的情况，但需要注意，由于元素并没有被销毁，因此可能会影响页面的性能。 ```html <template> <div> <span v-show="show">我是一个v-show指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` 总结来说： - `v-if` 适合在不需要频繁切换元素显示状态的情况下使用，可以减少 DOM 的渲染次数，提高性能。 - `v-show` 适合在需要频繁切换元素显示状态的情况下使用，但需要注意对页面性能的影响。