一、v-show
(1)不管條件是真假都被編譯,而後被緩存,並且DOM元素保留渲染頁面結構後,經過 "display:none" 控制元素狀態,而且在以後一直存在。當切換v-show模塊時,只是簡單的更改css。
(2)v-show不支持tamplate標籤css
二、v-if
(1)當切換v-if模塊時,Vue.js 有一個局部編譯/卸載過程,由於 v-if 之中的模板也可能包括數據綁定或子組件。
v-if 是真實的條件渲染,由於它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。
v-if 是惰性的,若是爲false,則什麼也不錯-不編譯,不渲染。 當第一次條件爲真時,纔開始編譯。
(2)有時侯咱們把一個 <template> 元素當作包裝元素,並在上面使用 v-if,最終的渲染結果根據條件的真假顯示。緩存
v-if適合運營條件不大可能改變;v-show適合頻繁切換。事件
講解一個使用經歷,寫了一個組件彈層,且滑動輪播,根據輪播的內容顯示是否含有切換的小圓點,這樣須要new不一樣的實例,一開始是用的v-show,可是再次打開數據錯亂了,找了一些方法讓數據銷燬,可是都沒有解決,最後發現v-if有銷燬DOM的做用,就這樣順利的解決啦。編譯