摘要:是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。有时侯我们把一个元素当做包装元素,并在上面使用,最终的渲染结果根据条件的真假显示。适合运营条件不大可能改变适合频繁切换。
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)有时侯我们把一个 元素当做包装元素,并在上面使用 v-if,最终的渲染结果根据条件的真假显示。
v-if适合运营条件不大可能改变;v-show适合频繁切换。
讲解一个使用经历,写了一个组件弹层,且滑动轮播,根据轮播的内容显示是否含有切换的小圆点,这样需要new不同的实例,一开始是用的v-show,但是再次打开数据错乱了,找了一些方法让数据销毁,但是都没有解决,最后发现v-if有销毁DOM的作用,就这样顺利的解决啦。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86713.html
摘要:并在上面使用,最终渲染结果将不包括元素。另外一个根据条件展示元素的指令,用法与大致相同。注意,不支持元素,也不支持与看完了文章,你会发现我们可以利用和两个指令来控制我们元素的行为。 熟悉 Angular 的同学对指令肯定不会陌生,Vue中也借鉴了指令这一特性,在 Vue 中指令都是带有 v- 的特殊属性,那么指令有什么作用呢? 我的理解就是:指令是用来控制 DOM 元素的行为,例如最...
摘要:在中配合条件渲染一整组因为是一个指令,需要将它添加到一个元素上。因此,如果需要非常频繁地切换,则使用较好如果在运行时条件不太可能改变,则使用较好。 vue的条件渲染 v-if v-if指令可以插入和删除所命令的模板 Yes data:{ ok:true } 输出HTML Yes 当我们更改 ok 为 false时我们会发现页面的 Yes 消失,在控制台里面会发现 h1 标签也已...
摘要:是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。有时侯我们把一个元素当做包装元素,并在上面使用,最终的渲染结果根据条件的真假显示。适合运营条件不大可能改变适合频繁切换。 1、v-show(1)无论条件是真假都被编译,然后被缓存,而且DOM元素保留渲染页面结构后,通过 display:none 控制元素状态,并且在之后一直存在。当切换v-sho...
阅读 2531·2021-09-22 15:25
阅读 2934·2021-09-14 18:03
阅读 1157·2021-09-09 09:33
阅读 1668·2021-09-07 09:59
阅读 2867·2021-07-29 13:50
阅读 1472·2019-08-30 15:44
阅读 1680·2019-08-29 16:22
阅读 1259·2019-08-29 12:49