Vue.js 中 v-if 和 v-show 有什么区别?

来源:互联网 发布:网络写手已成高危职业 编辑:程序博客网 时间:2024/05/29 18:17

转自:http://blog.csdn.net/liuzhuan_1986/article/details/52259802

简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低。具体解释如下:

v-show 渲染页面结构后,通过 "display:none" 控制元素状态。所以初始化时间较长。

v-if 是懒计算,如果条件为false,它什么也不做,加载速度较快。当条件为真时,v-if 才会真正编译渲染页面结构。因此,v-if 切换复杂组件的花销要比 v-show 大得多。

所以要根据实际场景决定使用哪个指令。

v-if 条件判断,不满足条件的话则不会出现在dom中
v-show 是否显示,不管满不满足条件均会在dom中,若不满足条件,则会设置成隐藏 display:none

原创粉丝点击