Bedingtes Rendering von Vue (v-if und v-show)

1. v-wenn

In Vorlagen können Sie bedingt rendern. Die Bedingungen werden durch die Kombination von v-if , v-else-if und v-else implementiert.

Der Beispielcode lautet wie folgt:

<div id="app">
    <p v-if="weather == 'sun'">Lass uns heute in den Park gehen! </p>
    <p v-else-if="weather == 'rain'">Gehen Sie heute ins Kino! </p>
    <p v-else>Heute gehe ich nirgendwo hin! </p>
</div>
<Skript>
    lass vm = neues Vue({
        el: "#app",
        Daten: {
            Wetter: 'Sonne'
        }
    });
</Skript>
 

2. Verwenden Sie v-if auf <template>

Manchmal möchten wir mehrere html Elemente in einer Bedingung laden, dann können wir dies beim template tun.

Der Beispielcode lautet wie folgt:

<div id="app">
    <template v-if="Alter<18">
        <p>Wie viele Punkte hast du in Mathe? </p>
        <p>Wie viele Punkte haben Sie in Englisch? </p>
    </Vorlage>
    <template v-else-if="Alter>=18 && Alter<25">
        <p>Sind Sie verheiratet? </p>
        <p>Haben Sie die Aufnahmeprüfung für das Aufbaustudium abgelegt? </p>
    </Vorlage>
    <Vorlage v-else>
        <p>Haben Sie eine Gehaltserhöhung bekommen? </p>
        <p>Wie hoch ist das Gehalt? </p>
    </Vorlage>
</div>
<Skript>
    lass vm = neues Vue({
        el: "#app",
        Daten: {
            Alter: 24
        }
    });
</Skript>
 

3. Verwenden Sie Schlüssel, um wiederverwendbare Elemente zu verwalten

Darüber hinaus versucht Vue in der Vorlage, vorhandene Elemente wiederzuverwenden, anstatt sie erneut zu rendern, was effizienter sein kann.

Wenn wir Benutzern erlauben, zwischen verschiedenen Anmeldemethoden zu wechseln:

<div id="app">
  <template v-if="loginType === 'Benutzername'">
    <label for="username">Benutzername:</label>
    <input type="text" id="Benutzername" name="Benutzername" placeholder="Benutzername">
  </Vorlage>
  <Vorlage v-else>
    <label for="email">E-Mail</label>
    <input type="text" id="email" name="email" placeholder="E-Mail">
  </Vorlage>
  <div>
    <button @click="changeLoginType">Anmeldetyp wechseln</button>
  </div>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      loginType: "Benutzername"
    },
    Methoden: {
      ändereLoginTyp(){
        // Wenn der Typ Benutzername ist, wechseln Sie zu E-Mail, andernfalls this.loginType = this.loginType==="Benutzername"?"email":"Benutzername";
      }
    }
  })
</Skript>

Schauen wir uns als nächstes das Effektdiagramm an:

Hier wird es ein Problem geben. Wenn ich die Informationen in das username Eingabefeld eingebe und zum Postfach wechsle, bleiben die vorherigen Informationen erhalten. Dies entspricht definitiv nicht den Anforderungen. Wenn wir möchten, dass html Element bei jedem Wechsel neu gerendert wird, können wir dem Element, das neu gerendert werden muss, ein eindeutiges key hinzufügen. Es wird empfohlen, für key Schlüsselattribut einen Integer- oder String-Typ zu verwenden.

Der Beispielcode lautet wie folgt:

<div id="app">
  <template v-if="loginType === 'Benutzername'">
    <label for="username">Benutzername:</label>
    <input type="text" id="Benutzername" name="Benutzername" placeholder="Benutzername" key="Benutzername">
  </Vorlage>
  <Vorlage v-else>
    <label for="email">E-Mail</label>
    <input type="text" id="email" name="email" placeholder="E-Mail" key="email">
  </Vorlage>
  <div>
    <button @click="changeLoginType">Anmeldetyp wechseln</button>
  </div>
</div>

Wir können sehen, dass wenn der Benutzername 123 in den E-Mail-Modus umgeschaltet wird, 123 im Eingabefeld verschwindet.

Hinweis: <label>-Elemente können weiterhin effektiv wiederverwendet werden, da ihnen kein Schlüsselattribut hinzugefügt wurde.

4. V-Show

Eine weitere Möglichkeit zum bedingten Anzeigen von Elementen ist die v-show Direktive. Die Verwendung ist ungefähr die gleiche:

<h1 v-show="ok">Hallo!</h1>

Der Unterschied besteht darin, dass Elemente mit v-show immer gerendert werden und im DOM verbleiben. v-show schaltet einfach CSS property display eines Elements um.

Hinweis: v-show unterstützt weder das Element <template> noch v-else.

4.1 v-if vs. v-show

v-if ist „echtes“ bedingtes Rendern, da es sicherstellt, dass Ereignis-Listener und untergeordnete Komponenten innerhalb des bedingten Blocks während des Umschaltens ordnungsgemäß zerstört und neu erstellt werden.

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

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

Im Allgemeinen sind die Umschaltkosten v-if höher, während die anfänglichen Renderkosten v-show höher sind. Wenn Sie daher sehr häufig wechseln müssen, ist es besser v-show zu verwenden; wenn sich die Bedingungen während der Laufzeit selten ändern, ist es besser v-if zu verwenden.

Dies ist das Ende dieses Artikels über Vue Conditional Rendering v-if und v-show. Weitere verwandte Inhalte zu Vue Conditional Rendering finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!