vue v-if 和v-show

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue v-if 和v-show脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1、v-show
(1)无论条件是真假都被编译,然后被缓存,而且DOM元素保留渲染页面结构后,通过 "display:none" 控制元素状态,并且在之后一直存在。当切换v-show模块时,只是简单的更改css。
(2)v-show不支持tamplate标签

2、v-if
(1)当切换v-if模块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 是惰性的,如果为false,则什么也不错-不编译,不渲染。 当第一次条件为真时,才开始编译。
(2)有时侯我们把一个 <template> 元素当做包装元素,并在上面使用 v-if,最终的渲染结果根据条件的真假显示。

v-if适合运营条件不大可能改变;v-show适合频繁切换。

讲解一个使用经历,写了一个组件弹层,且滑动轮播,根据轮播的内容显示是否含有切换的小圆点,这样需要new不同的实例,一开始是用的v-show,但是再次打开数据错乱了,找了一些方法让数据销毁,但是都没有解决,最后发现v-if有销毁DOM的作用,就这样顺利的解决啦。

脚本宝典总结

以上是脚本宝典为你收集整理的vue v-if 和v-show全部内容,希望文章能够帮你解决vue v-if 和v-show所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue