Vue中v-if、v-show、display：none和visibility：hidden的区别

最新推荐文章于 2025-04-12 19:27:18 发布

前端小白۞

最新推荐文章于 2025-04-12 19:27:18 发布

阅读量6.7k

点赞数 5

分类专栏：大前端 Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zzzz121380/article/details/121008133

版权

大前端同时被 2 个专栏收录

55 篇文章

订阅专栏

Vue.js

11 篇文章

订阅专栏

Vue中v-if、v-show、display:none和visibility: hidden的区别

1、v-if="false"和v-show="false"以及display:none都是网页中不占任何的位置。

v-show="false"相当于display:none;

2、visibility: hidden;只是单纯的隐藏元素，占据位置
3、v-if="false"的时候在控制台状态是注释状态没有实际渲染

v-show与 v-if 比较

v-show 指令的功能与 v-if 指令相似。不过 v-if 指令会根据表达式重建或销毁元素、组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性。

因为 v-if 指令开销较大，所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景。

所以如果使用频繁就使用v-show 。原理是：切换css的display:none ，切换消耗比较低，但是初始化会渲染。
v-if的切换需要重新渲染，代价过大。

如果是不频繁就使用v-if, 因为在初始化时，如果v-if="false"的话不会渲染

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小白۞

关注关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

v-show和v-if的区别 display:none和visible: hidden的区别

qq_43944285的博客

05-09

1347

星空旅行者曦橙紫皮 2:53:23 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素星空旅行者曦橙紫皮 2:53:42 display:none是不为隐藏的对象保留其物理空间，俗称看不见也摸不着； visible: hidden是为隐藏的对象保留其物理空间的，俗称看不见但摸得着。 ...

vue-observe-visibility:检测何时元素在页面上变得可见或隐藏

05-11

观察观察检测何时元素在页面上变得可见或隐藏。赞助商目录安装 npm install --save vue-observe-visibility :warning: 该插件使用了并非在所有浏览器中都支持的（当前在Edge，Firefox和Chrome中受支持）。您需要包括一个才能使其在不兼容的浏览器上运行。进口 import Vue from 'vue' import VueObserveVisibility from 'vue-observe-visibility' Vue . use ( VueObserveVisibility ) 或者： import Vue from 'vue' import { ObserveVisibility } from 'vue-observe-visibility' Vue . directive ( 'observe-visibility'

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

v-if，v-show，display：none，visibility:hidden的区别和联系

A_adadada的博客

10-21

1320

他们二者都可以控制显示与隐藏，且隐藏元素后再页面上不占用空间，但不同的是，当v-if的结果为false，那么浏览器将不会对其进行渲染（也就是dom结构不存在），dom结构不存在当然就不占用空间了。他们二者的区别，这里就不再老生常谈了，在面试中如果涉及到这二者的区别时，注意可以扩展以下，重绘和回流。2.v-show：它也可以控制网页元素的显示与隐藏，其原理是给元素设置了display：none；1.v-if ： vue的内置指令，作用的条件渲染，可以动态的控制元素的显示于隐藏。配合使用，功能更加强大。

深入理解 v-show 指令及其使用方法

最新发布

m0_75075881的博客

04-12

1199

v-show是 Vue 中用于条件渲染的一个指令，它通过控制元素的display样式来决定元素是否可见。与v-if不同，v-show不会销毁元素，只是简单地隐藏它，适合频繁切换显示与隐藏的场景。条件渲染v-show用于根据布尔值动态显示或隐藏元素，元素始终保留在 DOM 中，只是通过来隐藏。与v-if的对比v-show更适合频繁切换显示和隐藏的场景，而v-if更适合条件变化不频繁的情况。性能考虑v-show避免了频繁销毁和重建 DOM 元素，适用于元素显示和隐藏变化频繁的场景。与其他指令配合使用。

vue中tab隐藏display:none（v-show无效，v-if有效）

luemeon的博客

07-28

1659

编译前和运行时标签不同。

Vue中visibility display v-if v-show比较

weixin_44080648的博客

10-13

4354

display: none 给一个元素设置了display: none后，该元素及其后代元素均会被隐藏。且重写后代元素的display属性无效。该元素及其后代元素均不占用原空间，隐藏后的元素无法点击。 visibility:hidden 给元素设置visibility: hidden后，该元素隐藏。其子元素默认继承父元素visibility属性，但子元素若重写属性，则不受父级影响。该元素隐藏后，仍保持占位。隐藏部分无法点击，可见的子元素可以点击。 display: none和visibility

vue的v-if隐藏不了元素失效问题，因为display:none；失效，所以元素还显示

陈新科的博客

08-02

3966

1.开始隐藏echarts的图表没隐藏掉 <divclass="tableonejjtp" v-if="dasdasadsa1"> //中间是多个echart可视化的div </div> 2.后来在网上找了好多方案也没解决掉，最后直接在外层套个div设置if隐藏，简单直接！ <divv-if="dasdasadsa1"> <divclass="tableonejjtp"> //中...

v-show为什么基于display:none,而不是visibility： hidden

m0_71288644的博客

10-06

311

v-show只是想要在页面上控制元素的可见，而不是dom树上，所以是基于display：none的。

V-if与display:none的区别（v-if v-show display:none visibility:hidden 辨析）

龙丨行的博客

04-02

3368

前言：网上有很多相似的内容，为啥我还再写一篇？因为那些文章千篇一律都说的是 v-if 与 v-show， display:none 与 visibility:hidden各自的关系，而对于v-if与display,v-show与display的关系说得不是很清楚，所以写下这篇小记。 v-if ：让Dom 节点直接消失。 v-show：调用display:none 来控制元素是否展示。 display:none --> 物理空间消失，但是dom还在。（即：视觉上看不到，也没有位置，但是dom节点还在

v-if和v-show、display: none和visibility：hidden的区别

weixin_39147099的博客

12-17

8779

v-if指令和v-show指令的区别相同点：都可以控制标签的显隐。不同点：一、实现本质方法区别 v-if是动态的向DOM树内添加或者删除DOM元素 v-show本质是利用标签的display属性，通过visibility和none控制显隐 v-if="false"在DOM不能获取到该标签 v-show=false在DOM中仍能获取到该标签二、编译的区别 v-show其实是在控制c...

Vue知识巩固------v-if和v-show的作用和区别

wennianzhu的博客

08-11

190

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。是惰性的：如果在初始渲染时条件为假，则什么也不做一直到条件第一次变为真时，才会开始渲染条件块。 v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。（相当于做了display:none）总结一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show比较好；如果在运行时条件不太可能改变，则使用v-

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

qq_43660897的博客

07-07

274

1.v-if v-if是通过控制dom节点是否生成来控制元素的显示和隐藏例如： <template> <div id="app"> <div id="content" v-if="false">v-if隐藏</div> </div> </template> 可以看到并没有生成id为content的dom节点 2.v-show v-show生成了dom节点，之后通过dom节点的内联样式display来控制元素的显示和

v-if 和v-show的相同和区别

lzfengquan的博客

03-21

386

引入vue.js 注意的是： v-if后边的条件只要跟着v-else 中间就不能在夹杂任何的标签元素了 v-if和v-show 相同点都是实现对dom的操作，显示或者隐藏不同的是：v-if是将元素在文章中删除。 v-show则是相当于添加了样式 display：none。 v-show不能使用在template标签上，只因为本身template就不会渲染，只是在修改css属性中的displ...

转：display:none与hidden区别

qq_33765174的博客

08-03

3971

转：今天做毕设时遇到了一个小问题，我做了一个tab导航栏，点击一个tab页其它tab页隐藏，这时候第一想法是使用display：none来控制显示隐藏，写了之后发现使用display会有一个问题，就是第二个tab页的轮播图是在页面渲染时获取第二个tab页中某个元素的宽度来做自适应效果，因为已经隐藏，宽度为0，所以导致轮播图的高度也为0，后来把display:none改为visibility：hid...

display: none 和 visibility: hidden 属性的区别，Vue 中 v-if / v-show 的区别

qq_40860137的博客

02-25

1782

两者都会隐藏 dom 元素，区别：display: none 不会占位置，visibility: hidden 会占位置，下面是案例1、visibility: hidden（占位置）2、display: none（不占位置）

Vue2.0笔记 - Vue使用v-if操作子组件显隐

hinataneji的博客

05-09

533

当在使用子组件时，不使用v-if进行显隐操作时，子组件不触发销毁，且页面加载时此子组件即加载，使用初始的默认传值

VUE通过添加或删除“display：none”属性实现显示切换

withkai44的博客

03-24

3305

<template> <div class="hello"> <div class="top">3楼</div> <div class="middle" :style="display"> <div class="bedroom room">2楼卧室</div> <div class="bathroom room">2楼洗手间</div> </

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

来自江西的大熊的博客

03-05

2503

1.v-show跟v-if都是bai做条件隐藏跟显示用的， 2.v-show是页面zhi加载的时候显示的内容跟隐藏的内容同时加载在页面上只是根据条件进行了隐藏。 3.v-if是页面加载的时候根据条件进行显示需要展示的内容。并且销毁不需要显示的条件内容，每次加载的时候进行销毁当前加载符合条件的内容 4.简单的来说就是前者在页面上可以看见隐藏的条件，后者看不见隐藏的条件。 5.v-show：false 相当于给元素加了 display：none,隐藏起来。 6.v-if：false 相当于从页面上删除了

v-show、v-if、display:none的区别（推荐的父子模板写法）

guoth的博客

03-30

340

子组件v-if=“false”，父组件无法调用子组件的方法（一）尽可能避免的写法 // 父组件 (这样写模态框会被记载到父组件中) <a-modal title="用户信息完善" v-model="showModal" width="35%"> <user-info-complete ref="infoModal" v-if="showUserInfo"></user-info-complete> </a-modal> // 请求该方法

v-if 和 :if

07-28

回答: v-if和:if是Vue.js中用于条件渲染的指令。它们的作用是根据条件来决定是否渲染某个组件或元素。v-if是Vue.js的内置指令，而:if是v-bind的简写形式，用于动态绑定一个属性。\[1\] 在给定的代码示例中，使用了v-if指令来根据flag的值来切换显示不同的组件。当flag为true时，显示myCom1组件，当flag为false时，显示myCom2组件。\[2\] 此外，还可以结合动画效果来实现组件的切换。在给定的代码示例中，使用了Vue.js的过渡效果，通过添加相应的CSS类来实现渐变和平移的动画效果。\[3\] 总结来说，v-if和:if都是用于条件渲染的指令，可以根据条件来动态显示或隐藏组件或元素。在给定的代码示例中，使用了v-if指令来根据flag的值来切换显示不同的组件，并结合动画效果实现了切换时的动画效果。 #### 引用[.reference_title] - *1* [V-if与display:none的区别（v-if v-show display:none visibility:hidden 辨析）](https://blog.csdn.net/qq_33592641/article/details/115390880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue中组件v-if、v-else、:is的切换和过渡动画](https://blog.csdn.net/u011608672/article/details/114325313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]