vue 中 v-if 和 v-show 的区别 与区别
- vue 中的 v-if 与v-show 都可以动态控制元素的显示与隐藏,
v-if
v-if 控制元素的显示与隐藏是把dom元素整个渲染 或者删除,删除后页面中就不存在这个dom元素,以此来达到隐藏的效果; 所以v-if在每次切换的时候都会重新创建或者销毁元素,有较高的切换性能消耗;
而且 v-if 是惰性的,如果在初始渲染时条件为假,那就什么也不做,直到条件第一次变为真时, 需要渲染时才会开始渲染。
v-show
v-show 则是无论你的初始条件是什么,元素都会渲染,dom元素始终都是存在的,v-show 只是通过控制css的display属性来控制它的显示与隐藏;
它有较高的初始渲染消耗;
使用场景
如果元素需要频繁的切换推荐使用v-show
如果很少用到切换 就用v-if
注意
如果 已经在元素中css属性已经明确写出 display: none ; 在v-if中就算设置v-if为true 也不能让元素显示;因为没办法覆盖掉或者修改掉cssi里面的display: none 的属性,
false start ~~

浙公网安备 33010602011771号