有几种版本可以供大家参考:
第一种方法是看尚硅谷的视频的笔记加上自己添加的一些内容。
第二种方法是看其它文章总结记录下来的,方便自己以及给大家使用。
第一种:
视频地址:028_尚硅谷Vue技术_条件渲染_哔哩哔哩_bilibili
(看完相信大家都可以懂这两个的区别)
v-if:
写法跟 if else 语法类似
v-if="表达式"
v-else-if="表达式"
v-else
适用于:切换频率较低的场景,因为不展示的DOM元素直接被移除
特点:不展示的DOM元素直接被移除。
如果开始条件为false则什么都不做,只有为true才会编译。
注意:v-if 可以和 v-else-if v-else 一起使用,但要求结构不能被打断
v-show:
写法:v-show="表达式"
适用于:切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉(display:none)。
在任何情况下都会被编译,然后被缓存,而且dom元素会被保留。
注意:
使用 v-if 时,元素可能无法获取到,而使用 v-show 一定可以获取到;
template标签不影响结构,页面html中不会有此标签,但只能配合 v-if,不能配合 v-show。
第二种:
●手段:
v-show 是通过设置DOM元素的display样式属性控制显隐;
●编译过程:
v-if 切换有-个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件; v-show 只是简单的基于css切换;
●编译条件:
v-if 是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;
v-show 是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留;
●性能消耗:
v-if 有更高的切换消耗;
v-show 有更高的初始渲染消耗;
●使用场景:
v-if 适合运营条件不大可能改变(即切换频率低);
v-show 适合频繁切换(即切换频率高)
ok,最后,希望大家还是可以看一下视频,然后自己动手试一下,然后你就啥也都懂了。
贵在理解,理解了,都不需要怎么去用力记。