什么时候用 v-if, 什么用 v-show？

最新推荐文章于 2024-04-14 10:00:00 发布
最新推荐文章于 2024-04-14 10:00:00 发布
阅读量624 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXH0122/article/details/121683516
版权

我们先来说说两者的核心差异;

v-if : DOM 区域没有生成,没有插入文档…等条件成立的时候才动态插入到页面!有些需要遍历的数组对象或者值,最好用这货控制,等到拿到值才处理遍历,不然一些操作过快的情况会报错,比如数据还没请求到!
v-show: DOM 区域在组件渲染的时候同时渲染了,只是单纯用 css 隐藏了，对于下拉菜单,折叠菜单这些数据基本不怎么变动.用这个最合适了…而且可以改善用户体验,因为它不会导致页面的重绘,DOM 操作会!

简言之:
DOM结构不怎么变化的用v-show, 数据需要改动很大或者布局改动的用v-if

ZXH0122
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
vue中的v-if和v-show的区别详解
10-16
如果需要在多个条件分支中控制元素的显示，使用 `v-if` 更为合适，而需要频繁切换显示状态且不涉及复杂的条件分支时，选择 `v-show` 会是更好的选择。 在实际开发中，根据项目的规模和需求来选择合适的指令至关重要...
什么时候使用v-if，什么时候使用v-show?
M40153c的博客
04-01 492
当组件中某块内容只会显示或隐藏，不涉及到修改数据的情况下，用v-if更加合适； 当组件某块内容显示隐藏是可变化的，涉及到修改数据的情况下，此时用v-show更加合理。 如果页面数据需要渲染发生改变，用v-show更好，若用v-if可能会导致部分方法失效，数据无法传入 ......
关于什么时候用 v-if 和 v-show 浅谈
前端-阿来
09-29 1129
了解Vue的朋友都知道，v-if和 v-show 具有类似的功能，不过 v-if 才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。 若表达式初始值为 false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。 而 v-show 只是简单的 css 属性切换，无论条件真与否，都会被编译。相比之下， v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而 v-show 适用于频繁切换条件。 它会为元素添加一个行内样式：display：none； 另外呢
面试题38：v-if与v-show的区别和适用场景
qq_51066068的博客
06-08 943
v-if与v-show的区别和适用场景
v-show和v-if有什么区别 什么时候使用最好
m18811305380的博客
05-17 699
区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 ...
还在纠结什么时候用v-if和v-show吗
马小兜要努力呀
09-03 759
vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示，但是他们控制的原理是不同的。 v-if原理 v-if控制元素显示或者隐藏是把整个dom元素整个地渲染或者删除，如果删除元素，也就是说页面中不存在这个dom元素，从而达到隐藏的效果； v-if每次切换的时候都会创建或者销毁元素，有较高的切换性能消耗 v-if是惰性的，如果在初始条件为假的情况下什么也不会做，直到第一次条件为真的时候才会渲染条件块 v-show原理 v-show无论初始条件是什么，元素都会被渲染，也就是说dom元
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
v-if和v-show的使用以及在什么情况下使用
D_D_an的博客
10-22 346
v-if和v-show区别以及使用场景
qq_40922656的博客
12-14 4388
最近常常使用v-if和v-show。今天总结一下这两个控制页面显隐指令的区别以及使用场景。 区别： 1、控制页面显隐方式不同。 v-if是通过控制dom节点是否存在来控制页面是否显示。v-show是节点已经存在，通过dom节点的display样式来控制显隐。 display none为不显示 block为显示。 2、编译过程不同。 v-if切换有局部编译和卸载的过程。切换过程中会适当的销毁和重构内部的事件监听和子组件。v-show切换只是简单的基于css切换。 3、编译条件不同。 v-if是惰性的，如果初始
v-show和v-if的区别和使用场景（超级详细）
最新发布
贫僧法号依平
04-14 3904
是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。不管初始条件是什么，元素总是会被渲染。的时候不会触发组件的生命周期。有更高的初始渲染消耗；要复杂的多，因为还有。
面试官：Vue中的v-show和v-if怎么理解？
iygxv
01-09 1154
故心故心故心故心小故冲啊 文章目录一、v-show与v-if的共同点二、v-show与v-if的区别三、v-show与v-if原理分析v-show原理v-if原理四、v-show与v-if的使用场景五、参考文献 一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示 在用法上也是相同的 <Model v-show="isShow" /> <Model v-if="isShow" /
v-if与v-show的区别、使用场景
热门推荐
程序员良仔
09-03 3万+
基于vue框架 删除文本 标记文本 章节目录基于vue框架前言注脚注释自定义列表区别总结系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 //Ajijdf 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block var foo = 'bar'; 项目 Value 电脑 $1600 手机 $12 导管 $1 Column 1 Column 2
vue中v-if和v-show的区别
积少成多
02-08 1万+
欢迎访问我的个人博客 http://xiaolongwu.cn/ 相同点 两者都是在判断DOM节点是否要显示。 不同点 1、实现方式 v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。 2、编译过程 v-if切换有一个局部编译/卸载的过程，切换过程...
v-if和v-show的异同和使用场景
Lin 的博客
06-02 5458
通过一个案例来寻找v-if和v-show的异同： 说明：1、el（即element的缩写），它指定vm实例对象将要控制的区域，(本例为id="app"的模块。)2、data 是个对象，指定了控制区域内要用到的数据。3、methods 虽然有s后缀，但是它代表对象，在此部分自定义方法。4、在VM实例中，如果要访问data上的数据，或者要访问 methods中的方法，必须要在前面加 this。 &...
vue中的v-if和v-show的区别以及使用场景
weixin_42237651的博客
05-20 1287
vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。 实现本质方法区别 vue-show本质就是标签display设置为none，控制隐藏 vue-if是动态的向DOM树内添加或者删除DOM元素 编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 编译的条件 v-show都会编译，初始值为false，只是将display设为none，但它也编译了 v-if初始值为false，就不会编译了 性能 v-show
v-if和v-show的使用
成在坚持，贵在坚持
08-18 4350
v-if和v-show 1.v-if v-if：在设置v-if的时候元素是没有被渲染出来的，如示例图1所示；将v-if设置为true的时候，元素才被渲染出来。 <p v-if="isActive" ref="ppp">1212</p> <el-button @click="toShow">显示</el-button> // 如果设置为true时获取元素的内容，这个时候为undefined，因为元素还没被渲染出来，这个时候需要使用this.$nextTick
Vue中v-if和v-show区别与用法解析
sxjit的博客
02-13 1万+
一、v-if和v-show的异同点 1.相同点 ：v-if和v-show都可以动态控制DOM元素的显示隐藏。 2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。 我们通过一个简单的demo对比观察下： <body> <div id="app"> <div v...
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7730
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
什么时候用v-if，什么时候用v-show
04-28
v-if 和 v-show 都可以用来控制元素的显示和隐藏，但它们有不同的使用场景。 v-if 是惰性的，只有当表达式为真时才会渲染元素，而在表达式为假时会从 DOM 中移除元素。因此，v-if 更适用于不经常切换的情况，因为它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值