vue-if與vue-show的區別

兩者都是動態顯示DOM元素

 

不同點：

1、使用方式

v-if是根據后面數據的真假，來判斷DOM的添加刪除等操作

v-show只是在修改元素的css樣式（display屬性值）

 

2、實現過程

v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；

v-show只是簡單的基於css切換操作

 

3、條件渲染

v-if如果初始渲染條件為真，就渲染，反之就不渲染

（並且在渲染條件切換時，相對應的條件塊內的事件監聽器和子組件會適當的銷毀和重建）

v-show不管初始條件是否為真，都會被渲染

（只是通過修改css屬性display來控制顯示與隱藏）

 

4、性能消耗

v-if有更高的切換消耗，不適合做頻繁的切換

v-show有更高的初始渲染消耗，適合做頻繁的切換

 

另外v-show不支持v-else和template元素

 

<div id="app">
        <div v-if="islo">你好，vue</div>
        <div v-else="islo">請登錄</div>
 </div>

new Vue({
       el:'#app',
       data:{
           islo:false
       }
   })
//v-if時候，islo不成立會顯示v-else的請登錄，而v-show就直接隱藏，不會顯示請登錄 

 

總結：

v-if和v-show都是用來控制元素的渲染

v-if判斷是否加載，可以減輕服務器的壓力，在需要時加載,但有更高的切換開銷

v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷

如果需要非常頻繁地切換，則使用 v-show 較好，如果在運行時條件很少改變，則使用 v-if