Bedingtes Rendering/Anzeige in Vue mit v-if, v-show, v-else und v-else-if

Einleitung

Vue.js ist ein einfaches Web-App-Framework zum Erstellen dynamischer Weboberflächen und Single-Page-Apps (SPAs). Wenn wir diese Apps erstellen, möchten wir das oft tun etwas basierend auf einem bestimmten Kriterium rendern – das ist die Essenz des bedingten Renderns.

Bedingtes Rendern bezieht sich auf die Fähigkeit, ein bestimmtes Markup der Benutzeroberfläche (UI) basierend darauf zu rendern, ob eine Bedingung wahr ist oder nicht. Dieser Begriff wird häufig in Kontexten wie dem Ein- oder Ausblenden von Komponenten (Umschalten), dem Umschalten von Anwendungsfunktionen, dem Umgang mit Authentifizierung und Autorisierung und vielem mehr verwendet.

In diesem Artikel sehen wir uns verschiedene Möglichkeiten zum bedingten Rendern in Vue.js an, indem wir die verwenden v-if, v-else-if und v-else Richtlinien. Wir werden uns auch einige Beispiele ansehen und den Unterschied zwischen den hervorheben v-if und v-show.

v-wenn

Das v-if Richtlinie verwendet wird einen Block bedingt rendern bedeutet den Block mit dem v-if Attribut wird nur sein hergestellt wenn der Ausdruck der Direktive a zurückgibt true Wert. Wenn der Ausdruck ein ungültiges Ergebnis liefert (z. B. null, 0, leerer String, false), ist das Element gelöscht vom DOM.

Veranschaulichen wir dieses Verhalten am praktischen Beispiel:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Da login eingestellt ist true, der <div> Block enthält v-if Direktive wird erzeugt, also angezeigt.

v-wenn vs v-zeigen

Es ist erwähnenswert, dass die v-show würde auch im obigen Beispiel funktionieren und würde scheinbar identisch funktionieren, aber es gibt einen Unterschied zwischen den beiden.

v-if bedingt macht ein Element, während v-show bedingt zeigt/zeigt ein Element.

Dies impliziert, dass, wenn die Bedingung umgeschaltet wird, v-if wird tatsächlich Komponenten löschen und wiederherstellen v-show macht sie nur unsichtbar oder sichtbar. Die folgende Animation veranschaulicht, wie v-if tatsächlich löscht und reproduziert Codeblöcke:

Unterdessen v-show wird das Element immer im DOM beibehalten und nur sein CSS ändern, um sein Erscheinungsbild umzuschalten (indem es seine display zu none):

v-sonst

Das v-else Direktive ist ein v-if Direktive, mit der Sie die anpassen können false Wert in bedingten Renderings. Wenn nicht true, Sie können v-else zu definieren, was stattdessen passieren soll.

Angenommen, wir haben eine Passworteingabe und möchten, dass eine Fehlermeldung ausgegeben wird. "Schwaches Passwort", wenn die Länge der Eingabe kleiner als 6 ist oder anzeigen "Sicheres Passwort" wenn die Länge größer als 6 ist.

Dies ist ein bedingtes Rendering mit einer Option zur Behandlung des falschen Falls:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Lassen Sie uns dies verwenden, um den Inhalt einer einfachen Anmeldeseite umzuschalten, sodass die Nachricht geändert wird, je nachdem, ob ein Benutzer angemeldet ist oder nicht. Wir ändern die Schaltflächenbezeichnung basierend auf der userLoggedIn Status auch:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Das Klickereignis der Schaltfläche schaltet um userLoggedIn Datenelement, und dies wirkt sich auf die angezeigten Daten aus, wie unten dargestellt:

v-sonst-wenn

v-else-if extends a v-if sowie einem else...if Block. Dies ist ähnlich wie bei JavaScript else...if Block insofern, als es uns erlaubt, eine if-Anweisung zu einer bestehenden hinzuzufügen v-if. Dies wird verwendet, wenn viele Kriterien zu prüfen sind und kann mehrfach verkettet werden:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Zusammenfassung

In diesem Artikel haben wir gesehen, wie man ein Element mit bedingt rendert v-if, v-else und v-else-if. Wir haben auch den Unterschied zwischen erklärt v-if und v-show.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/