vue之v-if和v-show的區別詳解

本文主要跟大家介紹vue學習筆記之v-if和v-show的區別，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

v-if vs v-show

v-if 是「真正的」條件渲染，因為它會確保在切換過程中條件區塊內的事件監聽器和子元件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做－直到條件第一次變成真時，才會開始渲染條件區塊。

相較之下， v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

<template>
  <p id="app">
    <p v-if="isIf">
      if
    </p>
    <p v-show="ifShow">
      show
    </p>
    <button @click="toggleShow">toggle</button>
  </p>
</template>

<script>
  export default {
    name: &#39;app&#39;,
    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比較好。

相關推薦：

在元素與template中使用v-if指令詳解

Vue.js使用v-show和v -if的注意事項

Vue.js常用指令匯總（v-if、v-for等）

#

以上是vue之v-if和v-show的區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！