[vue] v-show和v-if有什么区别?使用场景分别是什么?
Activity
xjt31012 commentedon Jun 21, 2019
终于有一题是我会的了
v-show
相当于css的display,一般用在比较简单的业务里,不会默认执行v-if
是判断,会默认加载执行Zjingbo commentedon Jul 2, 2019
v-show在频繁切换的时候使用
tsejx commentedon Jul 6, 2019
区别:v-if 不渲染 DOM,v-show 会渲染 DOM
v-show 使用场景:
qp97vi commentedon Aug 7, 2019
v-show 是css的display显示和隐藏
v-if 是DOM 销毁和重建
v-show 使用场景:
1.频繁的切换显示状态
2.预渲染需求
ChaiDongYa commentedon Nov 28, 2019
为什么我点的是mvvm mvc mvp模式的理解进到这个页面
sundeheng commentedon Apr 7, 2020
mvc和v-if这俩题目的链接放反了。
zhaofeipeter commentedon Aug 3, 2020
v-if 有dom操作,适合一锤子买卖,
v-show 有样式更改,适合反复使用
CoderNanT commentedon Oct 8, 2020
v-if下面还可以写v-else-if和v-else,而v-show不行
v-if只有条件为真才创建DOM元素,而v-show条件满不满足都会创建DOM元素,只不过那个元素会添加display:none的样式
如果需要频繁的切换则使用v-show,否则用v-if
crush2020 commentedon Feb 1, 2021
v-shou 只是隐藏了当前DOM,但是还是会照常渲染。
v-if 直接是没有渲染这个DOM
Qinhank commentedon Feb 3, 2021
v-show会触发生命周期吗?v-if呢?为什么?
yxllovewq commentedon Mar 9, 2022
v-show:false,也即css设置为display: none。在页面中不占据位置,但是DOM依然存在,发生回流
v-if:false,直接没渲染到真实DOM中,发生回流
css:visibility:hidden,不同于v-show,看不见仍占据位置。发生重绘。
只要页面渲染发生变化都会导致生命周期钩子beforeupdate和updated执行。也即v-show、v-if、visibility都会触发生命周期钩子
WangLiqing0713 commentedon Jul 11, 2023
v-show底层原理是 display:none
v-if底层原理是Dom组件的重建和销毁
v-show在组件需要频繁切换时使用
v-if使用的组件不需要频繁切换
biouwai commentedon Mar 20, 2024
v-if是通过删除或添加dom节点的方式对元素进行操作;而v-show是通过设置css样式来控制的元素显示隐藏;
v-if应用在操作不频繁的元素上;v-show应用在需要频繁切换显示隐藏的元素上