一、 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 具体操作还是得看需求