一.共同点:都能控制元素在页面是否显示
二.v-show与v-if的区别
- 控制手段不同
- 编译过程不同
- 编译条件不同
控制手段:隐藏则是为该元素添加,元素依旧还在。显示隐藏是将元素整个添加或删除 v-show css--display:none dom v-if dom
编译过程:切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;只是简单的基于css切换v-if v-show
编译条件:是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染v-if
三.v-if与v-show的应用场景
v-if与 都能控制元素在页面的显示v-show dom
v-if相比 开销更大的(直接操作节点增加与删除)v-show dom
如果需要非常频繁地切换,则使用 v-show 较好
如果在运行时条件很少改变,则使用 v-if 较好