Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung des Unterschieds zwischen v-if und v-show in vue

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

小云云
Freigeben: 2018-02-05 13:14:55
Original
1494 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage