v-if 与v-show 的区别及使用场景

最新推荐文章于 2024-06-27 20:06:34 发布
最新推荐文章于 2024-06-27 20:06:34 发布
阅读量343 收藏 1
点赞数
分类专栏： 《vue.js 快跑》读书笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44584442/article/details/114255085
版权

虽然使用 v-if 和 v-show 指令，在页面呈现效果相同，但是两者之间确实存在影响和差异。

  1. 使用 v-if 隐藏的元素 Vue 不会尝试生成对应的HTML代码；而对于 v-show 指令，则会生成HTML代码，并且让起 display 值为 none，也就是说当需要隐藏尚未加载的内容时，v-if 指令更好一些
  2. 使用 v-if 会有性能开销，每次插入或者移除元素时都必须要生成元素内部的DOM树，这在某些时候是非常大的工作量。而 v-show 除了在初始创建开销时之外没有额外的开销。如果希望频繁切换某些内容，则选择 v-show。
  3. 如果元素包含任何图片，那么仅使用CSS隐藏父节点可以使浏览器在图片显示之前就加载它，这意味着一旦 v-show 变为真值，图片就可以显示出来。如果是 v-if 指令，图片会直到要显示时才开始加载

说明：以上内容为读《vue.js快跑：构建触手可及的高性能Web应用》的摘录 

桃花扇J
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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 621
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官方提供的脚手架，
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 8116
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
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 968
v-if与v-show的区别和适用场景
如何区分vue中的v-show 与 v-if
10-14
在Vue中，`v-if` 和 `v-show` 都是用于条件渲染的指令，但它们之间存在一些关键的区别。 1. 渲染机制： - `v-if`：`v-if` 指令会根据初始条件决定是否真的渲染元素。如果条件为真，Vue将生成并插入相应的DOM元素；...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
10-18
在Vue.js框架中，v-if和v-show是用来控制元素渲染和显示的两种指令，它们在使用上有明显的区别，并且各自有适用的场景。v-if是一个条件渲染指令，它会在指令的表达式返回真值时，动态地向DOM中渲染或者插入元素；而v...
5.（vue3.x+vite）v-if与v-show区别.rar
09-15
在Vue.js框架中，`v-if` 和 `v-show` 都是用于条件渲染的指令，它们的作用都是根据表达式的值来决定是否...在使用Vue3.x和Vite进行项目开发时，理解`v-if` 和 `v-show` 的区别能帮助我们更好地优化代码，提升应用性能。
解决echarts图表使用v-show控制图表显示不全的问题
10-15
在实际开发中，我们可能会遇到这样一个场景：当利用`v-if`或`v-show`切换图表时，Echarts图表的渲染可能不完全，导致显示异常。 首先，`v-if`和`v-show`都是Vue中的条件渲染指令，它们都可以用来根据表达式的值决定...
初学Vue（个人学习笔记）
hhhhhy
10-20 522
简短的文章介绍：这个是我学vue时的学习笔记。前面“2-3”形式的是学习慕课网的一个课程，没学完。中间有一个“vue文档”。后面的“P4”形式的是跟b站技术胖的Vue2.x基础免费视频。目前同时在看《Vue.js快跑》，如果有需要记录的点，会加以补充。 好像这么弄有些乱，会花些时间重新整理一下的。 简单介绍vue vue.js有什么用，是用来做什么的（整理） Vue的核心是将数据显示在页...
[vue][1][vue基础]
T0UGH
03-10 162
1 Vue.js 基础参考 《Vue.js快跑构建触手可及的高性能Web应用》 vue官方文档 1.1 为什么选择Vue.js1.1.1 简介 Vue是一套用于构建用户界面的渐进式框架 Vue被设计为可以自底向上逐层应用 Vue的核心库只关注视图层 便于与第三方库或既有项目整合 当与现代化的工具链以及各种支持类库结合使用时，Vue...
v-if和v-show区别以及使用场景
qq_40922656的博客
12-14 4407
最近常常使用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的区别，两者的应用场景分别是什么（容易理解）
weixin_42343966的博客
11-25 1600
由于v-if是直接操作dom元素的（增加和删除），所以开销会比v-show大v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
【Vue指令】—v-if、v-show二者用法及区别
2401_84138890的博客
04-12 1776
v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏,它拥有比较高的初始渲染消耗。v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果。v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块。使用v-show指令，当指令是true时就显示，是false就隐藏。
【Vue】v-if与v-show的区别及对应应用场景
m0_74086230的博客
12-05 948
v-if与v-show的区别及对应应用场景
Vue中的v-if与v-show有什么区别 分别在什么时候使用
xiaowude_boke的博客
03-02 1336
v-if 和 v-show的区别
v-if 和 v-show的区别有哪些以及何时使用
SYQ15544423296的博客
09-05 1099
目开发时什么时候使用v-show，什么时候使用v-if，两者有什么区别
v-if和v-show的区别和使用场景
coinisi_li的博客
09-29 1149
v-if和v-show作用看起来差不多，都是用来控制元素的显示、隐藏，当条件不成立时，其所对应的标签元素都不可见。
v-if 和 v-show使用场景
06-11
v-if 和 v-show 都可以用来控制元素的显示和隐藏，但是它们的使用场景是不同的。 v-if 适用于条件比较复杂的情况，需要根据表达式的值来动态添加或销毁元素。例如，在一个表格中，需要根据某一列的值来判断是否显示该行数据，就可以使用 v-if 指令。 v-show 适用于需要频繁切换元素的显示和隐藏的情况。例如，在一个页面中，需要根据用户的操作来切换一些面板的显示和隐藏，就可以使用 v-show 指令。 总的来说，如果你需要在页面加载时就确定一个元素是否要显示，或者需要根据复杂条件来动态添加或销毁元素，就应该使用 v-if；如果你需要频繁切换元素的显示和隐藏，就应该使用 v-show。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值