首頁 > web前端 > js教程 > 主體

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

小云云
發布: 2018-02-05 13:14:55
原創
1484 人瀏覽過

本文主要跟大家介紹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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!