v-if VS v-show
在vue实现轮播图效果 中分别用到 v-if和 v-show 下面讲讲我理解的他们的区别:
v-if:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>
,将提出它的内容作为条件块。
v-show:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>
,将提出它的内容作为条件块。
v-if VS v-show:
在切换 v-if
块时,Vue.js 有一个局部编译/卸载过程,因为 v-if
之中的模板也可能包括数据绑定或子组件。v-if
是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此,如果需要频繁切换 v-show
较好,如果在运行时条件不大可能改变 v-if
较好。
因此分别用了v-if和v-show.
我在![](data:image/png;base64,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)
处用的v-show,目的是为了让它的 v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'能获取到,当PreNext=false的时候虽然它不显示出来,但它在页面中占着位置,但如果用v-if的话,他的v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'就获取不到.