1. 程式人生 > 實用技巧 >有關vue中v-if和v-show的區別

有關vue中v-if和v-show的區別

其實這兩個都是屬於根據條件判斷元素是否可見,但是還有有區別的哦!

v-show:就是無論什麼時候它其實都一直存在頁面上也就是會渲染在DOM上,只是你寫了條件讓它可見或不可見而已,因為它本質是把它的css屬性display設定成了none而已

例如:我曾經在專案開發中一個頁面引入三個元件,每個元件資料訪問用了三個介面,然後元件是否顯示我用了v-show,導致專案執行時我沒有在頁面顯示的元件中的介面也執行啦,就是這個因為雖然我不顯示元件,但是它也在DOM上的。

一下是官網中對兩者的解釋,希望對你有用

v-ifvsv-show

v-if是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。

相比之下,v-show就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。

一般來說,v-if有更高的切換開銷,而v-show有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用v-show較好;如果在執行時條件很少改變,則使用v-if較好。