vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別

更新時(shí)間：2017年09月20日 09:29:39 作者：點(diǎn)點(diǎn)樂淘淘

本篇文章主要介紹了vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

v-if vs v-show

v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

相比之下， v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 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控制臺(tái)能更明顯的看出來

對(duì)比可以看出v-if直接從代碼中刪除了，v-show只是通過display來切換狀態(tài)，因此建議頻繁切換的話用v-show比較好

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
Vue實(shí)現(xiàn)push數(shù)組并刪除的例子
今天小編就為大家分享一篇Vue實(shí)現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue3 elementplus table合并寫法
這篇文章主要介紹了vue3 elementplus table合并寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
一篇文章總結(jié)Vue3.2語法糖使用
Vue3.2(21年8月10日)相比于Vue3新增了語法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語法糖使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
vue組件在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。
2022-12-12
詳解vue-router傳參的兩種方式
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)目錄樹結(jié)構(gòu)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue動(dòng)態(tài)組件和異步組件原理詳解
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和異步組件原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取
這篇文章主要介紹了vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08