v-show v-if v-for

256 阅读1分钟

v-if v-show

  1. 手段 v-if:生成或移除一个元素

v-show:显示或隐藏一个元素

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

  2. 编译条件 v-if是惰性的,如果初始条件是假,则什么也不做,之后又在条件第一次变为真的时候,才开始局部编译;v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留

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

  4. 使用场景

v-if适合运营条件不太可能改变,v-show更适合频繁切换

Que: 如果使用css将元素设为display:none,再将v-show设置为true,可以显示吗?

不可以,因为v-show控制显隐,使用过js代码去修改元素的样式,如果value为false,设置display:none,如果value为true,设置display:'',于是value为true时,只能将元素style效果消除,并不能覆盖css的display效果。

v-if v-for

同时使用场景:将