代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <div v-if="isIf">v-if</div> <div v-show="ifShow">v-show</div> <button @click="toggleShow()">點擊按鈕</button> </div></body><script src="vueDist/vue.min.js"></script><script> new Vue({ el:"#app", data:{ isIf : true, ifShow : true, }, methods:{ toggleShow:function () { this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } })</script></html>沒點擊前的圖
點擊后的圖
顯示來看v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建；而v-show 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。如果你想了解更多相關內容請查看下面相關鏈接
新聞熱點
疑難解答
