vue中v-if与v-show的区别

  • 情景:有时候你可能会需要一个效果按条件时有时无
  • vue提供v-if与v-else来实现这样的效果,以下是使用其的一部分代码


  • 效果图v-if

vue中v-if与v-show的区别_第1张图片

 点击后会发现,上图中的蓝框消失,dom结构中的div也消失了

vue中v-if与v-show的区别_第2张图片

  • v-show的效果图

 vue中v-if与v-show的区别_第3张图片

点击之后的效果图,看到这里就会看到区别了

vue中v-if与v-show的区别_第4张图片

  • 区别

v-show的元素会始终被渲染并保留在dom中,原理是每次改变其display的属性

v-show不支持template元素

v-if是惰性的,即如果初始条件是假,则什么也不做

 v-if会在切换过程中使组件被销毁和重建,所以v-if有更高的切换开销,但是v-show因为无论如何都会被渲染,所以初始渲染开销会更高,所以如果非常频繁的切换用v-show比较好,但是运行时条件很少被改变则使用v-if较好

你可能感兴趣的:(前端,vue)