實(shí)例講解v-if和v-show的區(qū)別
更新時(shí)間：2019年01月31日 11:12:12 作者：LDH-
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
代碼：
<!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>
沒(méi)點(diǎn)擊前的圖
點(diǎn)擊后的圖
顯示來(lái)看v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建；而v-show 不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來(lái)說(shuō)， v-if 有更高的切換開(kāi)銷，而 v-show 有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue自定義樹(shù)形控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見(jiàn)時(shí)對(duì)其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧2023-09-09
關(guān)于vue中@click.native.prevent的說(shuō)明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了axios全局路由攔截的設(shè)置方法,axios全局路由代碼通常是在構(gòu)建axios實(shí)例注入的，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
Vue中iframe?結(jié)合?window.postMessage?實(shí)現(xiàn)跨域通信
window.postMessage()?方法可以安全地實(shí)現(xiàn)跨源通信，在一個(gè)項(xiàng)目的頁(yè)面中嵌入另一個(gè)項(xiàng)目的頁(yè)面，需要實(shí)現(xiàn)父子，子父頁(yè)面的通信，對(duì)Vue中iframe?結(jié)合?window.postMessage?實(shí)現(xiàn)跨域通信相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-10-10
vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))
本文介紹了如何使用Vue實(shí)現(xiàn)下拉框的多選功能,實(shí)現(xiàn)了在選擇框中選擇多個(gè)選項(xiàng)的功能,文章詳細(xì)介紹了實(shí)現(xiàn)步驟和示例代碼,對(duì)于想要了解如何使用Vue實(shí)現(xiàn)下拉框多選功能的讀者具有一定的參考價(jià)值2023-08-08
這篇文章主要為大家介紹了LogicFlow插件使用前準(zhǔn)備詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01