v-for 和 v-show 的區別

v-forv-show指令都可以控制一個元素的顯示和隱藏,它們兩個的功能如此相似,那麼有什麼區別呢?

如果v-ifv-show的值同時爲假時,v-ifv-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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章