vue学习-v-if和v-show

最新推荐文章于 2024-04-07 12:22:15 发布
转载 最新推荐文章于 2024-04-07 12:22:15 发布 · 414 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/x550392236/article/details/78470780
文章标签：

#vue

本文详细解析了Vue.js中v-if与v-show指令的区别，包括它们的工作原理、性能考量及适用场景。v-if实现真正的条件渲染，适用于条件不常变动的情况；v-show通过CSS控制显示，适合频繁切换。

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-show

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

区别

1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。display:none,会引发回流

3、一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
这几句话已经涵盖网页所有的v-if和v-show的区别

Vue内置指令——v-show和v-if指令
zg0601的博客
03-21 4万+
Vue中指令都是带有v-的特殊属性，这些指令主要是用来控制DOM元素的行为，例如最简单的显示、隐藏。本文详细讲解Vue中非常常用的两个条件指令—— v-show 和 v-if 以及它们的区别。
Vue指令
interstingh的博客
03-23 1259
v-text 不能解析标签，会替换标签内的内容，相当于innerText <div v-text="d"></div> v-html 与v-text相似但可以解析标签，相当于innerHTML <div v-html="d"></div> v-show 根据表达式的真假，切换元素的显示和隐藏（v-show后可以接布尔值 data中的变量 表达式等） <!-- v-show 引起的是 redraw 性能消耗比 reflow更小 --&g
前端面试题记忆——Vue
Sweat_candy的博客
04-07 739
vue部分 1、优点 轻量级、速度快、简单易学 低耦合、可重用性、独立开发 文档齐全，且文档为中文文档 2、vue父组件向子组件传递数据 props 3、子组件向父组件传递事件 $emit 4、v-show和v-if指令得共同点和不同点 相同点：都可以控制dom元素得显示和隐藏 不同点 v-show 改变display属性，dom元素并未消失，切换时不需要重新渲染页面 v-if直接将dom元素从页面删除，再次切换需要重新渲染页面 5、让CSS只在当前组件中起作用 scoped 6、
「Vue系列」之重新探索v-if和v-show
码农的博客
04-30 2127
自我纠错之v-if和v-show的区别 前言 最近打算抓住金三银四的尾巴，找一个刚合适自身发展的平台，看面试题的时候看到这个问题，毕竟不是刚入行的时候了，知道了区别也想看看为什么会有这样的区别，这样的区别怎样合理的运用才能更好地发挥着两个指令该有特长。 用途 v-if和v-show都是vue内置指令，常用于操纵目标元素的显示隐藏。 （和opacity，visibility不同的是这两个属性使目标元素隐藏之后，目标元素还会占用之前在文档流占用的位置） 原理 v-if：通过设置true/false来删除和创建目
简述回流和重绘，简单的表达 以及v-if和v-show的区别
lzfengquan的博客
07-07 2968
Web前端开发：什么是页面重回（repaints）与回流（reflow） 回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算。 就相当于重新卸载和加载一样 这样就是发生回流一定有重绘的发生。也可以利用v-if来理解 。v-if相当于渲染不渲染。不占位置 或者理解为画画，你现在把画扔了重新绘画一张。 重绘（repaints）是一个元素外观的改变所触发的浏览器行为， 例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重
vue中 v-if和v-show的区别
qq_57404393的博客
09-08 747
通过控制css中的display设置为none,控制元素的显示与隐藏。：控制html元素的插入和移除，会导致浏览器的回流和重绘。：都是控制元素的显示与隐藏。
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
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闪现的解决方法，一起看看吧
vue2和vue3的v-if与v-for优先级对比学习
10-14
在这篇文章中，我们将深入探讨Vue 2.x和Vue 3.x中v-if和v-for这两个关键指令的优先级差异，以及如何在实践中更好地利用它们。 首先，v-if和v-for都是Vue中的条件指令，但它们的作用不同。v-if用于条件渲染，只有当...
vue虚拟dom
m0_62351775的博客
01-27 411
概念 通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中 虚拟dom可以简单的用一句话概括， 就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点， 成本比较低，另外我们在频繁操作dom是一种比较大的开销
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree，对于Render Tree的理解：Render Tree和DOM Tree类似，但是Render Tree能够识别样式，在Render Tree上，每一个node（节点）都有自己的Style（样式），但隐藏的节点或是不会用于显示的部分不会包含在Render Tree上。 上图是一个页面在浏览器中渲
Vue中 v-if 和v-show 的使用选择
jiangjunyuan168的博客
09-05 862
Vue中 v-if 和 v-show的使用选择欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。
v-if与v-show的区别
田兴的博客
09-15 4217
一、相同点 都可以动态控制着dom元素的显示隐藏 一、区别 v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除; v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的 二、性能对比 v-if有更高的切换消耗； v-show有更高的初始渲染消耗 三、使用场景 v-if适合运营条件不大可能改变的场景下； v-show适合频繁切换； 例如： v-if: 在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2822
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
v-if 和 v-show 的应用(切换)场景，及其区别
weixin_44719554的博客
09-27 863
v-if 指令是“真正”的条件渲染，因为它会确保在切换过程中条 件块内的事件监听器和子组件适当地被销毁和重建。 相比之下，v-show指令就简单得多，不管初始条件是什么，元 素总是会被渲染，并且只是简单地基于CSS进行切换。 3.一般来说，v-if指令有更高的切换开销，而v-show指令有更高 的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 指令较好;如果在运行时条件很少改变，则使用v-if指令较好。 以下为各自的小例子 ，共各位博友参考* v-if <!DOCTYPE html.
vue(1)--指令,回流与重绘---2019.5.20学习笔记
weixin_34198881的博客
05-20 1572
Vue作者:尤雨溪框架:MVVM渐进式的Javascript框架框架与类库的区别?举例:jquery好处:1.抹平了各个浏览器之间的差异2.链式操作DOM套餐框架:全家桶渐进式:vue只会包含核心语法,如需其他功能需要单独安装,例如:路由 vuex 前后端数据交互的方式什么是MVVM?mvc:model view controller 大多数会用在后端MVVM: 大多数用在前端M:m...
vue使用v-if时的注意点
热门推荐
挥别了青春的博客
07-12 5万+
v-if和v-else或v-else-if之间不能添加其他元素。   以下是错误事例&lt;span v-if="type==1"&gt;错误示范&lt;/span&gt; &lt;span&gt;哈哈哈&lt;/span&gt; &lt;p v-else&gt;嘿嘿嘿&lt;/p&gt;以下是正确实例&lt;span v-if="type==1"&gt;正
keep-alive Vue-动态组件怎么使用
cwcnl25131的博客
04-07 421
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
vue2 v-if 和 v-show 区别
最新发布
11-27
在 Vue 2 中，`v-if` 和 `v-show` 都用于条件性地渲染 DOM 元素，但它们的实现方式和使用场景有显著区别。下面详细解释两者的差异，并提供代码示例。 --- ### ✅ 区别总结： | 特性 | `v-if` | `v-show` | |------------------|--------------------------------------|-------------------------------------| | 渲染行为 | **惰性渲染**：条件为真时才创建元素 | **始终渲染**：元素始终存在于 DOM 中 | | DOM 存在性 | 条件为假时，元素从 DOM 中**移除** | 条件为假时，元素通过 `display: none` 隐藏 | | 初始渲染开销 | 较高（可能需要重新创建） | 低（只是切换样式） | | 频繁切换性能 | 差（频繁销毁/重建） | 好（仅 CSS 切换） | | 是否支持 `<template>` | 支持 | 不支持 | | 是否响应式更新 | 是 | 是 | --- ### 🧪 示例代码 ```html <template> <div> <!-- 使用 v-if --> <div v-if="showWithIf"> 这个元素使用 v-if 控制，false 时不会在 DOM 中存在 </div> <!-- 使用 v-show --> <div v-show="showWithShow"> 这个元素使用 v-show 控制，false 时 display: none </div> <!-- 按钮控制显示 --> <button @click="toggle">切换显示</button> </div> </template> <script> export default { data() { return { showWithIf: false, showWithShow: false }; }, methods: { toggle() { this.showWithIf = !this.showWithIf; this.showWithShow = !this.showWithShow; } } }; </script> <style> /* 可以观察到 v-show 的元素一直存在，只是样式变化 */ div[style*="display: none"] { color: gray; } </style> ``` --- ### 🔍 解释说明： - `v-if` 是“真正”的条件渲染： - 当 `showWithIf` 为 `false` 时，该 `<div>` **完全不会被渲染到 DOM 中**。 - 第一次变为 `true` 时，Vue 才会创建并挂载这个元素。 - 适合：**不常切换**的场景，如权限控制、初始加载判断等。 - `v-show` 是“伪隐藏”： - 元素**始终被渲染**，只是通过 `style="display: none"` 来控制可见性。 - 切换非常快，因为没有组件生命周期的开销。 - 适合：**频繁切换**的场景，如折叠面板、开关动画等。 > ⚠️ 注意：`v-show` 不能用在 `<template>` 上，而 `v-if` 可以。 --- ### 💡 相关建议 - 如果你想减少初始渲染负担，用 `v-if`。 - 如果你要频繁切换显示状态，用 `v-show`。 - `v-if` 可与 `v-else` 或 `v-else-if` 搭配使用，`v-show` 不行。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值