一、 v-if
1. <div v-if="true"> if 不隐藏</div>
2. <div v-if="false"> if 隐藏</div>
-
v-if 是控制dom的存在与否来控制元素的显示隐藏。
-
v-if也是惰性的 如果初始化条件为true则渲染,如果为false则什么都不做,所以v-if有更高的切换消耗
1.png
二、 v-show
1. <div v-show="true"> show 不隐藏</div>
2. <div v-show="false"> show 隐藏</div>
-
v-show 只是基于简单的css切换 使用display 有两个属性值 一个是none进行隐藏 block 进行显示 v-show有更高的初始渲染消耗
2.png
三、 使用场景
如果在项目中 频繁的使用到显示隐藏那么使用v-show 就行 如果不经常使用到显示隐藏就使用v-if 具体操作还是得看需求
