關于條件渲染

所謂條件渲染，就是根據不同的條件，使用不同的模板來生成 html。 在 Vue.js 中，使用 v-if 和 v-show 指令來控制條件渲染。

區別

v-show 會在app初始化的時候編譯并且渲染，并且在之后一直存在。當切換v-show模塊時，只是簡單的更改css。
v-if 當切換v-if模塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。 v-if 是惰性的，如果為false，則什么也不錯-不編譯，不渲染。 當第一次條件為真時，才開始編譯。

建議

v-show的切換消耗比較低，但是不會重新渲染子組件，所以最好用于靜態的內容或者不需要重新構建結構的組件。而 v-if 比較適合不太頻繁的切換狀態的組件。所以項目設計的時候，不要對復雜的業務設計模塊太頻繁的視圖切換。盡量將靜態內容和動態內容分離到不同的模塊中。

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

?

轉載于:https://www.cnblogs.com/hjbky/p/6940991.html

總結

以上是生活随笔為你收集整理的v-show 与 v-if区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。