代碼：
<!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()">點(diǎn)擊按鈕</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>沒點(diǎn)擊前的圖
點(diǎn)擊后的圖
顯示來看v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；而v-show 不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)武林網(wǎng)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
