v-show与v-if的区别

最新推荐文章于 2024-10-19 02:58:46 发布

chenmou4210

最新推荐文章于 2024-10-19 02:58:46 发布

阅读量137

点赞数

文章标签：前端框架 javascript ViewUI

原文链接：https://my.oschina.net/u/3986411/blog/2222318

版权

在自学vue.js这个比较简单的前端框架的一些指的过程中，我通过查找相关资料发现了v-show与v-if的一些区别。

v-show与v-if除了以下两点区别以外，用法基本相同：

1. v-show的隐藏是生成HTML标签，但通过CSS的display:none;隐藏起来；v-if是直接不生成HTML标签

2. v-show适合频繁切换。v-if切换有一个局部编译/卸载的过程，切换过程中不断地销毁和重建内部的事件监听和子组件，切换消耗高；而v-show只是简单的基于CSS切换，所以v-show切换消耗低，很适合频繁切换。

转载于:https://my.oschina.net/u/3986411/blog/2222318

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenmou4210

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

44、 v-if、v-show 和 v-html、v-text、v-model

sunnnnh的博客

06-10

612

1、v-html、v-text、v-model v-html 和 v-text 起了插值表达式{{}}的作用，显示对应的数据对象上的值（1）v-html

Vue指令v-show和v-if的区别

热门推荐

俊而不逊的博客

11-27

4万+

v-if和v-show是在前端开发中是比较常用的Vue指令，经常用来判断渲染部分代码块

参与评论您还未登录，请先登录后发表或查看评论

vue v-if && v-show && v-html实现原理以及区别

Aifangmy的博客

04-26

1337

v-if： v-if会先调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染。 v-show： v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display。 v-html： v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。总结： v-if 和 v-s

Vue学习v-show与v-if区别

李长渊的博客

05-14

348

Vue学习v-show与v-if区别

v-if与v-show的区别

qq_42314022的博客

03-12

195

v-if与v-show的区别情形：在form表单中添加了验证，根据条件展示或不展示某行，开始使用v-show隐藏后，规则还存在，验证通不过，之后使用v-if隐藏验证通过相同点：v-if与v-show都可以根据条件隐藏或展示元素区别：v-show:只是将元素隐藏，v-if判断条件不对，直接不会加载，只有符合条件的才会加载出现 ...

vue中v-if与v-show的区别

m0_73940426的博客

07-10

1510

综上所述，v-if 适合在运行时条件不经常改变或需要销毁和重建 DOM 的情况，而 v-show 则适合在需要频繁切换显示状态而不希望销毁 DOM 的情况。根据某些表单字段的状态来显示或隐藏额外的表单输入项，当用户选择某个选项时，显示相关的输入框。根据某些条件来显示或隐藏一些提示性文字或图标，表单输入是否符合要求时显示不同的提示信息。

v-if与v-show

唯见青山不见君

11-20

448

v-if与v-show

v-if和v-show的区别

weixin_53156345的博客

05-25

1475

在Vue2中，v-if和v-for都是在编译阶段被处理的，这意味着它们只有在组件被实例化时才会被处理，而无论条件是否满足，它们的相关DOM都会被创建。而在Vue3中，v-if和v-for是在渲染时被处理的，这意味着只有在条件满足时，v-if所对应的DOM才会被渲染出来。Vue3中，v-show的渲染也进行了优化，当条件不满足时，v-show所对应的DOM只是被隐藏了，而不是被销毁。在Vue3中，v-show和v-if的优先级仍然是相同的，即v-show优先级高于v-if。

Vue.js学习笔记：v-show与v-if区别

龚建波

10-22

632

区别相同点：v-if 与 v-show 都可以动态控制显示隐藏效果；不同点：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素来实现显示隐藏，v-show 是通过设置 DOM 元素的 display 样式属性。要注意的是，如果 css 中设置了元素的 display 样式属性，效果会有冲突。根据官方文档描述： v-if 是 “真正” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为...

vue中v-if和v-show的区别

Cx的博客

04-19

470

一、相同点都能控制元素在页面是否显示。（表达式为true则展示否则隐藏）二、不同点 v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除; v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的 v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。 v-if由false变为true的时候，触发组件的beforeCreat

在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-show页面闪烁,div闪现的解决方法

10-17

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧

如何区分vue中的v-show 与 v-if

10-14

在Vue中，`v-if` 和 `v-show` 都是用于条件渲染的指令，但它们之间存在一些关键的区别。 1. 渲染机制： - `v-if`：`v-if` 指令会根据初始条件决定是否真的渲染元素。如果条件为真，Vue将生成并插入相应的DOM元素；...

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

10-17

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下

深入理解vue.js中的v-if和v-show

12-02

本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点都是动态显示DOM元素 2.区别（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-...

基于springboot的网上服装商城推荐系统的设计与实现

集美大bug的博客

10-18

558

基于springboot美食商城推荐系统