Detaillierte Erklärung des Unterschieds zwischen v-if und v-show in vue

Dieser Artikel stellt Ihnen hauptsächlich den Unterschied zwischen v-if und v-show in Vue-Studiennotizen vor. Der Herausgeber findet ihn ziemlich gut, deshalb werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

v-if vs v-show

v-if ist ein „echtes“ bedingtes Rendering, da es sicherstellt, dass innerhalb des bedingten Blocks während des Umschaltens The Ereignis-Listener und Unterkomponenten werden zerstört und entsprechend neu erstellt.

v-if ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – der bedingte Block wird erst gerendert, wenn die Bedingung zum ersten Mal wahr wird.

Im Gegensatz dazu ist v-show viel einfacher – das Element wird unabhängig von den Anfangsbedingungen immer gerendert und einfach basierend auf CSS umgeschaltet.

Im Allgemeinen hat v-if einen höheren Umschaltaufwand, während v-show einen höheren anfänglichen Rendering-Aufwand hat. Daher ist v-show besser, wenn Sie sehr häufig wechseln müssen; v-if ist besser, wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern.

<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>

Sie können es deutlicher sehen, wenn Sie auf die Chromkonsole schauen

Der Vergleich zeigt, dass v-if direkt aus dem Code gelöscht wird und v-show den Status nur über die Anzeige umschaltet. Daher wird empfohlen, v-show zu verwenden, wenn Sie häufig wechseln.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung der V-IF-Direktive in Elementen und Vorlagen

Vue.js verwendet V-Show und v – Hinweise zu if

Eine Zusammenfassung gängiger Vue.js-Anweisungen (v-if, v-for usw.)

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen v-if und v-show in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!