解析v-if和v-show的区别和使用场景

最新推荐文章于 2024-06-27 20:06:34 发布
最新推荐文章于 2024-06-27 20:06:34 发布
阅读量2.4k 收藏 3
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dax1_/article/details/120039620
版权
本文对比了Vue中v-if和v-show的区别，v-if用于动态添加/删除DOM，涉及局部编译卸载，适用于低频切换；v-show则基于CSS显示隐藏，无编译卸载过程，适合高频切换。同时讨论了两者适用场景和限制，如v-if与v-for的配合问题。
摘要由CSDN通过智能技术生成

官方文档

地址 v-if vs v-show

在这里插入图片描述

区别汇总

  • v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
  • v-if是惰性的，如果初始条件为假，则什么也不做；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
  • v-if适用于低频率切换场景，v-show适用于频繁切换场景
  • v-if可以配合template标签使用，v-show不可以

题外：v-if 和 v-for不能一起使用

因为v-for比v-if有更高的优先级

Dax1_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中的v-if和v-show的区别详解
10-16
主要介绍了vue中的v-if和v-show的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
v-if 和 v-show的区别是什么? 什么时候使用v-if更好? 什么时候用v-show更好?
qq_39877681的博客
09-27 1万+
v-if 和 v-show的区别是什么? 什么时候使用v-if更好? 什么时候用v-show更好?
VUE笔记
最新发布
Gou_Hao_Liang的博客
06-27 599
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-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
面试题38：v-if与v-show的区别和适用场景
qq_51066068的博客
06-08 949
v-if与v-show的区别和适用场景
v-if和v-show区别以及使用场景
qq_40922656的博客
12-14 4395
最近常常使用v-if和v-show。今天总结一下这两个控制页面显隐指令的区别以及使用场景。 区别： 1、控制页面显隐方式不同。 v-if是通过控制dom节点是否存在来控制页面是否显示。v-show是节点已经存在，通过dom节点的display样式来控制显隐。 display none为不显示 block为显示。 2、编译过程不同。 v-if切换有局部编译和卸载的过程。切换过程中会适当的销毁和重构内部的事件监听和子组件。v-show切换只是简单的基于css切换。 3、编译条件不同。 v-if是惰性的，如果初始
Vue 通过自定义指令回顾v-内置指令(小结)
10-18
6. v-show：与v-if类似，但不同的是v-show只是简单地切换元素的display CSS属性，而不涉及DOM的销毁和重建，适用于频繁切换显示状态的场景。 7. v-for：用于遍历数组或对象，将数据渲染到元素列表中，每个数据项都...
c-jdbc使用入门
07-08
避免在路径中使用空格，推荐直接安装在C盘根目录下，以免后续出现命令行解析问题。 二、测试C-JDBC安装 在安装完成后，通过命令行验证C-JDBC是否安装成功。打开cmd窗口，切换至C:\software\c-jdbc-2.0.2-bin\bin...
详解vue mint-ui源码解析之loadmore组件
08-29
在`<mt-loadmore>`内部，我们可以定义顶部和底部的加载指示器，如例子中所示，通过`v-show`指令来根据状态显示不同的文字或图标。 在JavaScript部分，我们需要定义`loadTop`和`loadBottom`方法，它们分别对应上拉...
弹出一个带确认和取消的dialog实例
08-31
以下是`openConfirmDialog`方法的详细解析： ```java public static AlertDialog openConfirmDialog(Context context, String title, String msg, String okbutton, OnClickListener ok, String nobutton, ...
图片与表单同时上传element-ui (2).md
11-22
<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" ...
v-show和v-if的区别，两者的应用场景分别是什么（容易理解）
weixin_42343966的博客
11-25 1588
由于v-if是直接操作dom元素的（增加和删除），所以开销会比v-show大v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
Vue中的v-if与v-show有什么区别 分别在什么时候使用
xiaowude_boke的博客
03-02 1316
v-if 和 v-show的区别
【Vue】v-if与v-show的区别及对应应用场景
m0_74086230的博客
12-05 944
v-if与v-show的区别及对应应用场景
【Vue指令】—v-if、v-show二者用法及区别
2401_84138890的博客
04-12 1393
v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏,它拥有比较高的初始渲染消耗。v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果。v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块。使用v-show指令，当指令是true时就显示，是false就隐藏。
v-if 和 v-show的区别有哪些以及何时使用
SYQ15544423296的博客
09-05 1096
目开发时什么时候使用v-show，什么时候使用v-if，两者有什么区别
v-if与v-show的区别以及使用场景
m0_53418339的博客
06-19 265
2、v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS（display）切换。1、v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。v-show适用于需要频繁切换元素的显示和隐藏的场景。3、 v-if适用于不需要频繁切换元素显示和隐藏的情况。
v-if 与 v-show的区别以及什么时候用
LHLMN的博客
09-20 3792
相同点： v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。 不同点： 手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏，DOM 元素保留； 编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换； 编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才
v-if和v-show的区别和用法
屈小康
05-07 1231
vue中的v-show和v-if是做什么用的，两者区别是什么 1、v-show和v-if都是做条件隐藏跟显示用的。 2、v-show是页面加载的时候显示的内容跟隐藏的内容同时加载在页面上只是根据条件进行隐藏。 3、v-if是页面加载的时候根据条件进行显示需要的内容。并销毁不需要显示的条件内容，没加加载的时候进行销毁不符合条件的内容。 4、高频的切换下使用 v-show 低频的条件下 使用 v-if也可 ...
Vue组件生命周期与v-if/v-show深度解析
- 使用场景：`v-show`常用于简单显示/隐藏需求，如蒙层、购物车等；`v-if`更适合于控制复杂条件下的元素生成，如首页栏目切换。 #### 三、v-if和v-for优先级 在Vue中，`v-for`的优先级高于`v-if`。这意味着如果一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值