在Vue的內部指令中,v-show與v-if的區別,總結如下:
在Vue中,我們可以使用v-if和v-show來控制元素或模板的渲染。而v-if和v-show也屬於Vue的內部常用的指令(條件渲染)。這里所說的指令就是directive,指特殊的帶有前綴v-的命令,指令的值限定為綁定表達式,指令的職責是當表達式的值改變時把某些特殊的行為應用到DOM上。
v-show
除了v-if之外,Vue還提供v-show也可以控制元素的渲染。v-show和v-if功能有點相似,其中v-if依賴於控制DOM節點,而v-show是依賴於控制DOM節點的display屬性。當v-show傳入的值為true時,對應DOM元素的display的值為block之類的,反之為false時,display的值為none。也就是用戶看不到元素的顯示,但其DOM元素還是存在的。
v-if和v-show都能控制DOM元素的顯示和隱藏,但是在切換v-if模塊時,Vue有一個局部編譯/卸載過程,因為v-if中的模板可能包括數據綁定或者子組件,v-if是真是的條件渲染,它會確保條件快在切換時合適的銷毀與重建條件塊內的時間監聽器和子組件。
v-if 是“真正的”條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——直到條件第一次變為真時,才會開始渲染條件塊。相比之下,v-show 就簡單得多——不管初始條件是什么,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。
v-if 有更高的切換開銷,v-show有更高的初始渲染開銷。如果需要頻繁切換,則使用v-show 較好,如果運行條件不太可能改變,使用v-if較好。
這兩個都是Vue的內部指令,而且都是用來控制元素的渲染。只不過,v-if判斷是否加載,可以減輕服務器的壓力,在需要時加載;v-show調整DOM元素的CSS的dispaly屬性,可以使客戶端操作更加流暢。雖然這兩都都能很好的控制元素的渲染,但實際使用的時候,更應該根據自己的場景來判斷使用哪一個指令。
————————————————
版權聲明:本文為CSDN博主「歪歪100」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_41646716/article/details/80090484