vue v-if和v-show的共同点和不同点?

简介: vue v-if和v-show的共同点和不同点?

v-if:条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。

truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为假值(即除false0""nullundefinedNaN以外皆为真值)

 

v-show:根据条件展示元素, 不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS propertydisplay

v-if和v-show的共同点:

都能控制元素在页面是否显示,当表达式为true的时候,都会占据页面的位置,false相反

v-if和v-show的不同点:

1.控制手段不同:v-show隐藏则是为该元素添加css--display:none,dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

2.编译过程不同:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换

3.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗

相关文章
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
30 9
|
9天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
24 7