一看就懂，Vue中v-if和v-show的区别

最新推荐文章于 2024-07-04 15:06:45 发布
最新推荐文章于 2024-07-04 15:06:45 发布
阅读量32 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26625113/article/details/131948939
版权

v-if

  • 会影响DOM加载情况
  • 懒加载（仅在第一次条件为true时执行）
  • 可以配合v-if-else使用
  • 可以在template标签中使用

v-show

  • 无论条件如何都会加载
  • 采用js的display属性控制
  • 不可以和v-if-else配合使用
  • 不可在template标签中使用

总结

如需频繁切换时，采用v-show可避免频繁渲染（性能优化）
注意：在form表单内如需隐藏item，不可用v-show，因v-show只是隐藏，实际在表单提交时还是会有该项，需要使用v-if

KlausGG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发：Vue中v-if和v-show的使用以及应用场景
软贱开发攻城狮
08-28 2580
在Vue.js开发过程中，v-if和v-show的使用是比较常用的，虽然在用户角度来看使用这两者带来的视觉效果是一样的，但是从性能方面来说二者的使用效果是有差异性的。 一、Vue官方的解释： 1、v-if：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 2、v-show：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 3、v-if VS v-show： ①v..
vue中v-if和v-show的区别和使用场景
凯凯凯凯凯凯凯凯
05-07 1175
vue中v-if和v-show的区别和使用场景
vue之v-show和v-if详解
春风化雨
12-11 5421
一、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...
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 v-if和v-show区别
qq_43393995的博客
09-02 2645
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法。v-if 在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分。在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。
Vue指令v-show和v-if的区别
RayShyy的博客
06-30 825
在Vue项目的开发中，经常会遇到通过条件判断来显示和隐藏页面的需求，也就是"条件渲染"，我们通常会使用v-if 或 v-show来实现，今天主要讲下两者的区别和应用场景。
Vue中v-if和v-show的区别是什么？
GZZ__z的博客
11-05 1790
在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中v-if和v-show的渲染区别
w1060436872的博客
10-24 754
vue中v-if和v-show的渲染区别
Vue中v-if和v-show的比较
橘猫吃不胖的博客
03-22 1431
Vue中v-if和v-show的比较 v-if和v-show都可以控制元素是否在页面上显示，下面两个例子说明v-if和v-show的用法。 示例代码：v-if <!-- 下面的代码可以显示p标签，因为v-if的参数值表达式判断是true --> <div id="app"> <!-- v-if可以通过判断表达式的真假动态的插入和移除元素 --> <p v-if="key == 1">橘猫吃不胖</p>
vue中v-if和v-show条件为false时的区别
weixin_44563660的博客
03-08 6054
vue中v-if和v-show 条件为false时的区别 v-if中条件为false时，标签不存在，v-show中条件为false时，标签是默认隐藏样式。 原地址：https://www.cnblogs.com/rik28/p/6024425.html v-if: 例子： &lt;body&gt; &lt;div id="app"&gt; &lt;h1&g...
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
Vue.js 是一个流行的前端框架，它提供了一套强大的指令系统，其中包括 `v-if` 和 `v-show`，这两个指令在视图层的条件渲染中扮演着重要角色。它们的主要目标都是根据条件决定元素是否应该被展示，但在实现方式上存在...
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，这篇文章给大家分享Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法，一起看看吧
在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-...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 254
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1327
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 226
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
最新发布
黔肆的博客
07-04 276
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
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` 适合在需要频繁切换元素显示状态的情况下使用，但需要注意对页面性能的影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值