v-if /v-show区别

最新推荐文章于 2023-11-13 16:31:05 发布
最新推荐文章于 2023-11-13 16:31:05 发布
阅读量84 收藏
点赞数
分类专栏： 学习总结 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45843013/article/details/114526929
版权
  • v-if
    • 是否渲染这个标签
    • v-if是动态的向DOM树内添加或者删除DOM元素
    • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
    • v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；，v-if有更高的切换消耗，不适合做频繁的切换
  • v-show
    • display控制node/block
    • v-show是通过设置DOM元素的display样式属性控制显隐，v-show只是简单的基于css切换；
    • v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；v-show有更高的初始渲染消耗，适合做频繁的切换
Lenny-zlp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 的v-if与v-show
sunhy007的博客
07-04 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下： 在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了
Vue2.5笔记：v-if，v-show指令
六小登登的专栏
10-08 282
熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来...
v-if vs v-show
白不懂黑的静的专栏
11-19 174
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-
v-if v-show
tigerfish121的博客
03-12 217
目录一，v-if v-show 的共同点二，v-if v-show 的区别1 区别2 使用场景三，知识点补充 一，v-if v-show 的共同点 都能动态显示DOM元素 二，v-if v-show 的区别 1 区别 v-if ：可以根据表达式的值在 DOM 中生成或移除一个元素。当 if 赋值为 false 时，元素被移除，为 true 时，元素被生成。v-if 是在条件渲染，比如被赋值为 false 时，元素不会被生成 v-if 有更高的切换消耗 v-show ：可以根据表达式的值来显示或者隐藏 HTM
v-if与v-show区别
weixin_30664615的博客
02-25 91
在v-show中，元素是一直存在的，当v-show为false时，元素display:none只是隐藏了而已。 v-if 作用：判断是否加载固定的内容，如果为真，则加载；为假时，则不加载。 用处：用在权限管理，页面条件加载。 语法：v-if=“判断表达式” 特点：控制元素插进来或者删除，而不是隐藏。 so，一般的，v-if有更高的切换消耗，而v-show有更多的初始化渲染消...
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
这种现象通常被称为"闪现"或"Flicker"，它可能由`v-if`、`v-show`以及插值表达式`{{}}`的不当使用引起。本文将深入探讨这个问题的原因，并提供有效的解决方案。 首先，我们来分析闪现的原因。Vue.js在处理页面时...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
最新发布
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
v-if和v-show
weixin_46058007的博客
08-30 85
前端面试之v-if和v-show
V-if和v-show
大Z小z的博客
04-11 5652
v-if v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 也可以用v-else添加一个“else 块”： 在<template>元素上使用v-if条件渲染分组 因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做...
v-if条件判断及v-show
qq_53841687的博客
08-02 8215
key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。为何不推荐index作为key值:当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变。...
Vue基础指令之v-if和v-show
2301_77007887的博客
06-06 972
三. v-show 如果条件为false，则会将元素的样式display属性设置为none，元素仍然存在于DOM树中。如果条件为true，则会将元素的样式display属性设置为原来的值。二. v-if 如果条件为false，则不会渲染DOM元素，也就是说元素并不存在于DOM树中。如果条件为true，则会动态插入元素到DOM树中。一. v-if 和 v-show 都是条件渲染指令，通过判断条件来实现节点的显示和隐藏。
v-if和v-show的使用
成在坚持，贵在坚持
08-18 4356
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 v-for)
李继轩的博客
10-18 913
VUE v-if v-show v-for v-else
Vue.js 指令v-for和v-if和v-show
C.
02-19 8746
Vue指令之v-for和key属性 迭代数组 &amp;amp;amp;amp;lt;ul&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;li v-for=&amp;amp;amp;quot;(item, i) in list&amp;amp;amp;quot;&amp;amp;amp;amp;gt;索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}&amp;am
v-if和v-show区别
donghua-li的博客
10-22 3771
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title></head> <body> <div id="app"> <div v-if="isIf">v-if</div> <div v-show="ifShow">v-show</div>
v-if和v-show的详解
weixin_70245286的博客
08-26 1466
v-if和v-show
v-if 和v-show的区别
久念☆的博客
06-10 6294
v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染，为true是渲染（dom存在），为false时不存在（dom不存在） 1、v-if有更高的切换开销，v-show有更高的初始渲染开销。 如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。 2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。 所以当程序不是很大时候
vue项目使用v-if移除元素，页面不显示，但dom仍占位的原因
github_74887499的博客
11-13 454
单选点击启用：占位正常。单选点击关闭，不显示信息dom仍在页面上
Vue面试高频问题：MVVM理解、v-if/v-show区别与事件修饰符详解
v-if与v-show的区别** v-if和v-show都用于条件渲染，但它们的工作机制不同：v-if会在条件满足时创建元素，条件不满足时销毁；而v-show始终创建元素，只是在CSS中隐藏或显示。v-if的性能更好，适合于数据变化较少的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值