v-for
和 v-show
指令都可以控制一個元素的顯示和隱藏,它們兩個的功能如此相似,那麼有什麼區別呢?
如果v-if
和v-show
的值同時爲假時,v-if
和v-show
綁定的元素都不會在頁面中顯示,
如下所示
<div v-show="0">1111</div>
<div v-if="0">222</div>
網頁上白茫茫一片什麼都沒有,但是當你打開控制檯時,你就會發現別有洞天,控制檯上的內容爲
對於``v-show```而言,當取值爲假時,生成了這個元素,但卻將這個元素通過 display:none 的方式隱藏了這個元素,所以在頁面顯示的時候就不顯示
對於v-if
而言,當取值爲假時,不會生成這個元素,自然而然的也就不會在頁面中顯示
那麼什麼時候該用v-show
、什麼時候該用v-if
呢?
當頻繁的要使某些元素隱藏或者出現的時候,應該使用v-show
,因爲v-if
每次使元素隱藏或者出現時,都會將元素重新的的插入或刪除從DOM樹中,這些操作會產生很大的工作量
但v-show
卻不會存在這樣的情況,因爲v-show
已經生成了這個元素,只是通過display:none
將其隱藏掉了
說了這麼多,一句話:頻繁的需要隱藏和出現就用v-show