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