v-if vs v-show
v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做――直到條件第一次變為真時，才會開始渲染條件塊。
相比之下， v-show 就簡單得多――不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
<template> <div id="app"> <div v-if="isIf"> if </div> <div v-show="ifShow"> show </div> <button @click="toggleShow">toggle</button> </div></template><script> export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } }</script>看chrom控制臺能更明顯的看出來
對比可以看出v-if直接從代碼中刪除了，v-show只是通過display來切換狀態，因此建議頻繁切換的話用v-show比較好
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
