關(guān)于兩者的區(qū)別，官網(wǎng)是這樣說的：

在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）。

相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。

下面通過示例來看看在使用v-show與v-if時的注意事項

1、通過Vue.js中v-if指令來判斷Vue中某個對象是否為空（該對象與后臺傳來的json數(shù)據(jù)綁定），從而判斷是否顯示分頁條，在實際過程中發(fā)現(xiàn)，第一次請求后臺數(shù)據(jù)，進行渲染過程后，分頁條沒有顯示，但之后的請求后臺數(shù)據(jù)再渲染，分頁條都可正常顯示。

問題如圖所示：

2、原因

查看頁面未渲染dom結(jié)構(gòu)，發(fā)現(xiàn)上述分頁條所在的div，沒有出現(xiàn)頁面中，這是由于vue組件初始化時，由于list為空導(dǎo)致id為example的div刪除了，所以后續(xù)分頁操作，針對是空dom對象，在第一次渲染結(jié)束后，由于list不為空，該div又加到該節(jié)點上，所以而后的分頁條都可正常顯示。

3、解決

將v-if指令替換為v-show指令，在條件為真的情況下，v-if將其所在dom及其子dom都刪除，而v-show是將該dom加上了“display：none”，使其隱藏了起來。修改代碼及效果如下

使用心得：

對于V-show，V-if如何選擇，本人有以下建議：

1、對于管理系統(tǒng)的權(quán)限列表的展示，這里可以使用V-if來渲染，如果使用到V-show，對于用戶沒有的權(quán)限，在網(wǎng)頁的源碼中，仍然能夠顯示出該權(quán)限，如果用V-if，網(wǎng)頁的源碼中就不會顯示出該權(quán)限。（在前后臺分離情況下，后臺不負(fù)責(zé)渲染頁面的場景。）
2、對于前臺頁面的數(shù)據(jù)展示，這里推薦使用V-show，這樣可以減少開發(fā)中不必要的麻煩。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論