fe-interview icon indicating copy to clipboard operation
fe-interview copied to clipboard

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

Open undefinedYu opened this issue 6 years ago • 13 comments

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

undefinedYu avatar Jun 11 '19 05:06 undefinedYu

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

xjt31012 avatar Jun 21 '19 09:06 xjt31012

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

Zjingbo avatar Jul 02 '19 09:07 Zjingbo

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

v-show 使用场景:

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

tsejx avatar Jul 06 '19 00:07 tsejx

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

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

qp97vi avatar Aug 07 '19 02:08 qp97vi

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

ChaiDongYa avatar Nov 28 '19 09:11 ChaiDongYa

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

sundeheng avatar Apr 07 '20 06:04 sundeheng

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

zhaofeipeter avatar Aug 03 '20 02:08 zhaofeipeter

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

CoderNanT avatar Oct 08 '20 07:10 CoderNanT

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

crush2020 avatar Feb 01 '21 04:02 crush2020

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

Qinhank avatar Feb 03 '21 06:02 Qinhank

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

yxllovewq avatar Mar 09 '22 08:03 yxllovewq

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

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

WangLiqing0713 avatar Jul 11 '23 14:07 WangLiqing0713

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

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

biouwai avatar Mar 20 '24 13:03 biouwai