开始第一个MVVM框架啦,激动啊,哈哈
因为Vue.js还比较新,感觉网上的资源不是特别特别多,加了两个QQ群,有问题的时候问问群友,居然还要付费加群,整的我也想去搞一个诶,嘻嘻嘻……
今天聊一下,Vue.js 中 v-if 和 v-show 的区别。
官网是这样说的:

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。


总结下:
1、如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if,最终的渲染结果不会包含它。v-show 不支持 <template> 语法。
2、v-show是通过控制display属性控制元素隐藏显示的,在频繁操作时候用,vue-if在初始化显示用(条件为真的时候,局部编译,否则啥都不做!)
前端开发工具vue.js开发实践总结——关于v-if和v-show虽然都可以控制元素的显示和隐藏,但是它们是有区别的。如果用v-if的话,整个dom结构压根就不会出现在页面上,如果是用v-show的话,要视后面的条件来定,如果是true,则显示,如果为false,则加上style=”display:none”. 所以呢,如果是组件之类的大块头,个人觉得用v-if更好一些,如果是一些暂时性隐藏,一会要显示的,还是v-show更方便。对于v-style和v-show来比较,v-show相当于是v-style=”display:none”和v-style=”display:block”的快捷方式。
老板,我还是没懂?不要紧,就是说v-if是根据表达式的真假来删除和插入元素,不会在页面上渲染,v-show的元素会被渲染到html中,见与不见只是display:none。


2017.9.27
好久没来了,以前写的博文质量有待提高哈……..v-show都不支持组件好伐,[v-show 不支持 template语法]
文档说了:一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
嗯,多看文档!

Logo

前往低代码交流专区

更多推荐