Skip to content

[vue] v-show和v-if有什么区别?使用场景分别是什么? #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
undefinedYu opened this issue Jun 11, 2019 · 13 comments
Open
Labels
vue vue

Comments

@undefinedYu
Copy link
Contributor

[vue] v-show和v-if有什么区别?使用场景分别是什么?

@undefinedYu undefinedYu added the vue vue label Jun 11, 2019
@xjt31012
Copy link

终于有一题是我会的了
v-show 相当于css的display,一般用在比较简单的业务里,不会默认执行
v-if是判断,会默认加载执行

@Zjingbo
Copy link

Zjingbo commented Jul 2, 2019

v-show在频繁切换的时候使用

@tsejx
Copy link

tsejx commented Jul 6, 2019

区别:v-if 不渲染 DOM,v-show 会渲染 DOM

v-show 使用场景:

  1. 预渲染需求
  2. 需要频繁切换显示状态

@qp97vi
Copy link

qp97vi commented Aug 7, 2019

v-show 是css的display显示和隐藏
v-if 是DOM 销毁和重建

v-show 使用场景:
1.频繁的切换显示状态
2.预渲染需求

@ChaiDongYa
Copy link

为什么我点的是mvvm mvc mvp模式的理解进到这个页面

@sundeheng
Copy link

mvc和v-if这俩题目的链接放反了。

@zhaofeipeter
Copy link

zhaofeipeter commented Aug 3, 2020

v-if 有dom操作,适合一锤子买卖,
v-show 有样式更改,适合反复使用

@CoderNanT
Copy link

v-if下面还可以写v-else-if和v-else,而v-show不行
v-if只有条件为真才创建DOM元素,而v-show条件满不满足都会创建DOM元素,只不过那个元素会添加display:none的样式
如果需要频繁的切换则使用v-show,否则用v-if

@crush2020
Copy link

v-shou 只是隐藏了当前DOM,但是还是会照常渲染。
v-if 直接是没有渲染这个DOM

@Qinhank
Copy link

Qinhank commented Feb 3, 2021

v-show会触发生命周期吗?v-if呢?为什么?

@yxllovewq
Copy link

v-show:false,也即css设置为display: none。在页面中不占据位置,但是DOM依然存在,发生回流
v-if:false,直接没渲染到真实DOM中,发生回流
css:visibility:hidden,不同于v-show,看不见仍占据位置。发生重绘。
只要页面渲染发生变化都会导致生命周期钩子beforeupdate和updated执行。也即v-show、v-if、visibility都会触发生命周期钩子

@WangLiqing0713
Copy link

v-show底层原理是 display:none
v-if底层原理是Dom组件的重建和销毁

v-show在组件需要频繁切换时使用
v-if使用的组件不需要频繁切换

@biouwai
Copy link

biouwai commented Mar 20, 2024

v-if是通过删除或添加dom节点的方式对元素进行操作;而v-show是通过设置css样式来控制的元素显示隐藏;

v-if应用在操作不频繁的元素上;v-show应用在需要频繁切换显示隐藏的元素上

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests