實例講解v-if和v-show的區(qū)別
更新時間：2019年01月31日 11:12:12 作者：LDH-
今天小編就為大家分享一篇關(guān)于實例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
代碼：
<!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 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；而v-show 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時條件不太可能改變，則使用 v-if 較好。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了詳解vuex的簡單使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
大家都知道，Vuejs的 CLI工具 是基于 webpack 來實現(xiàn)的，所以在項目打包后，會生成的文件會很大。 主要原因是 webpack 將我們所有文件都打包成一個js文件，即使再小的項目，打包之后文件都會變得很大。 下面講講最近我遇到的相同問題。2020-02-02
vue axios基于常見業(yè)務(wù)場景的二次封裝的實現(xiàn)
這篇文章主要介紹了vue axios基于常見業(yè)務(wù)場景的二次封裝的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要給大家分享了vue項目的創(chuàng)建步驟以及vue路由router的相關(guān)知識點，非常的實用，有需要的小伙伴可以來參考下2020-01-01
Vue 本身以及周邊生態(tài)在設(shè)計語法糖上幾乎沒讓我失望過,包括本次亮相的 Vue Vine,它的出現(xiàn)引起了我對 Vue3 組件編寫方式的好奇,以及哪一種方式更接近「最佳實踐」？下面讓我來為大家一一道來2024-07-07
Vue對Element中的el-tag添加@click事件無效的解決
本文主要介紹了Vue對Element中的el-tag添加@click事件無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue 中的自定義指令是對底層 dom 進(jìn)行操作，下面以實現(xiàn)滾動到底部加載數(shù)據(jù)，實現(xiàn)無限加載來介紹如何自定義一個簡單的指令。2017-01-01
vue中的echarts實現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實現(xiàn)寬度自適應(yīng),本文給大家分享實現(xiàn)方案，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue2.0實現(xiàn)音樂/視頻播放進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了vue2.0實現(xiàn)音樂和視頻播放進(jìn)度條組件的思路及具體實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
Vue.js實戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04