search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.49k stars 3.26k forks source link

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

Open undefinedYu opened 5 years ago

undefinedYu commented 5 years ago

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

xjt31012 commented 5 years ago

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

Zjingbo commented 5 years ago

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

tsejx commented 5 years ago

区别：v-if 不渲染 DOM，v-show 会渲染 DOM

v-show 使用场景：

  1. 预渲染需求
  2. 需要频繁切换显示状态
qp97vi commented 5 years ago

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

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

ChaiDongYa commented 4 years ago

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

sundeheng commented 4 years ago

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

zhaofeipeter commented 4 years ago

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

CoderNanT commented 4 years ago

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

crush2020 commented 3 years ago

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

Qinhank commented 3 years ago

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

yxllovewq commented 2 years ago

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

WangLiqing0713 commented 1 year ago

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

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

biouwai commented 7 months ago

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

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