Bedingtes Rendering ist ein entscheidender Teil der Vorlagenerstellung in jeder Sprache. Entdecken Sie den Vue.js-Ansatz.

Vue.js ist ein beliebtes JavaScript-Framework, mit dem sich dynamische Webanwendungen einfach erstellen lassen. Vue.js kann Inhalte basierend auf Daten und Ereignissen rendern. Dies ist besonders nützlich, um responsive und interaktive Benutzeroberflächen zu erstellen.

Erfahren Sie, was Vue-Direktiven sind und wie Sie sie verwenden, um bedingtes Rendering in Vue.js zu erreichen.

Was sind Vue-Direktiven?

Mit Vue-Direktiven können Sie das Verhalten von HTML-Elementen in Vue.js-Vorlagen verbessern, indem Sie ihnen eindeutige Attribute hinzufügen.

Direktiven sind ein grundlegender Bestandteil von Vue.js und bieten eine einfache und leistungsstarke Möglichkeit, die Dokumentobjektmodell (DOM), Elementen dynamisches Verhalten hinzufügen und Daten verwalten.

Darüber hinaus können Sie mit Vue.js benutzerdefinierte Anweisungen erstellen, sodass Sie auf einfache Weise wiederverwendbare Funktionen für Vue-Apps erstellen können.

instagram viewer

Das Vue-Framework stellt seinen Anweisungen das Präfix voran "v-" vor dem Namen der Direktive. Beispiele für häufig verwendete Anweisungen in Vue sind v-ein, v-bind, v-für, Und v-wenn.

Was ist bedingtes Rendern?

Bedingtes Rendering ermöglicht es Ihnen, Elemente basierend auf von Ihnen festgelegten Bedingungen anzuzeigen oder auszublenden. Beispielsweise können Sie bedingtes Rendering verwenden, um Benutzern nur dann eine Nachricht anzuzeigen, wenn sie eine gültige E-Mail-Adresse eingegeben haben.

In Vue.js können Sie Anweisungen wie verwenden v-wenn Und v-zeigen um ein bedingtes Rendering in Ihrer Anwendung zu erreichen, anders als Sie es tun würden Rendern Sie Inhalte bedingt in React.js.

Bedingtes Rendering mit der v-if-Direktive erreichen

Ähnlich zu das JavaScript ansonsten Stellungnahme, Die v-wenn Direktive in Vue.js enthält eine Bedingung. Wenn es nicht erfüllt ist, wertet Vue.js die folgende Bedingung aus, die in a angegeben ist v-sonst Richtlinie und setzt dies fort, bis sie entweder eine Bedingung erfüllt oder alle Bedingungen auswertet.

Mit dieser Direktive können Sie ein Element basierend auf einem booleschen Wert bedingt rendern. Der Vue.js-Compiler rendert den Teil nicht, wenn sein Wert falsch ist.

Hier ist ein Beispiel für das bedingte Rendern von Inhalten mit v-wenn:

html>
<htmllang="de">
<Kopf>
<Titel>DokumentierenTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">
<h1v-wenn='FALSCH' >{{ Nachricht1 }}h1>
<h1v-sonst >{{ Nachricht2 }}h1>
div>
<Skript>
 const app = Vue.createApp({
 Daten () {
 zurückkehren {
 message1: 'Dies ist Ihre Vue-App.',
 Nachricht2: 'Noch keine Vue-App.'
 }
 }
 })
 app.mount('#app')
Skript>
Körper>
html>

Der obige Codeblock zeigt eine Vue-App, die durch Hinzufügen von a erstellt wurde Content-Delivery-Netzwerk (CDN) Link zum Hauptteil Ihrer HTML-Datei. Die v-if-Direktive rendert das h1-Element nur, wenn seine Bedingung wahr ist.

In Vue-Apps gibt es Situationen, in denen Sie eine Komponente basierend auf bestimmten dynamischen Kriterien rendern müssen. Dies ist in Szenarien nützlich, z. B. wenn Informationen nur angezeigt werden, wenn ein Benutzer auf eine Schaltfläche klickt, oder wenn ein Ladeindikator angezeigt wird, während Daten von einer API geladen werden.

Zum Beispiel:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">
<divv-wenn="showUsers">
<Ul>
<li>Benutzer1li>
<li>Benutzer2li>
Ul>
div>
<Tastev-on: klick="toggleShowUsers()">
 Benutzer umschalten
Taste>
<h1>{{ Nachricht }}h1>
div>
<Skript>
 const app = Vue.createApp({
 Daten () {
 zurückkehren {
 showUsers: wahr,
 Nachricht: 'Dies ist Ihre Vue-App.'
 }
 },
 Methoden: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
Skript>
Körper>
html>

Der obige Codeblock verwendet die v-wenn Anweisung zum bedingten Rendern von Inhalten basierend auf dem Wert einer booleschen Variablen, Benutzer anzeigen.

Der div Element wird angezeigt, wenn der Wert ist WAHR und versteckt, wenn es ist FALSCH. Klicken Sie auf die Benutzer umschalten Taste löst die aus toggleShowUsers() Methode, um den Wert von zu ändern Benutzer anzeigen.

Dieses Beispiel verwendet auch die v-ein Anweisung zum Überwachen von Ereignissen, z. B. einem Klickereignis auf der Schaltfläche. Es bewertet neu v-wenn Direktive wann immer der Wert von Benutzer anzeigen Änderungen.

Erzielen von bedingtem Rendering mit der v-show-Direktive

Der v-zeigen Direktive ist eine weitere Möglichkeit, Elemente in Vue.js bedingt ein- oder auszublenden. Es ist ähnlich wie bei v-wenn Direktive insofern, als sie Elemente basierend auf einem booleschen Ausdruck rendern kann. Es gibt jedoch einige entscheidende Unterschiede zwischen den beiden Richtlinien.

Der v-zeigen entfernt das Element nicht aus dem DOM, wenn der Ausdruck als falsch ausgewertet wird. Stattdessen verwendet es CSS, um die Elemente umzuschalten Anzeige Eigentum zwischen keiner und seinen ursprünglichen Wert.

Das bedeutet, dass das Element immer noch im DOM vorhanden ist, aber nicht sichtbar ist, wenn der Ausdruck falsch ist.

Hier ist ein Beispiel:

<Körper>
<divAusweis="App">
<divv-wenn="showUsers">
<Ul>
<li>Benutzer1li>
<li>Benutzer2li>
Ul>
div>
<Tastev-on: klick="toggleShowUsers()">
 Benutzer umschalten
Taste>
<h1v-zeigen="showUsers">{{ Nachricht }}h1>
div>
<Skript>
 const app = Vue.createApp({
 Daten () {
 zurückkehren {
 showUsers: wahr,
 Nachricht: 'Dies sind die Benutzer der Vue-App'
 }
 },
 Methoden: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
Skript>
Körper>

Der obige Codeblock verwendet die v-zeigen Direktive, um eine Nachricht anzuzeigen, die besagt: „Das sind die Nutzer der Vue-App’ jedes Mal, wenn Sie auf die Umschaltfläche klicken.

Auswahl zwischen v-if und v-show

Bei der Entscheidung zwischen der Verwendung der v-wenn Und v-zeigen Um Elemente in Vue.js bedingt ein- oder auszublenden, müssen einige wichtige Faktoren berücksichtigt werden.

Wenn sich der Zustand selten ändert, verwenden Sie die v-wenn Richtlinie ist gut. Das ist weil v-wenn entfernt das Element aus dem DOM, wenn die Bedingung falsch ist, was eine optimale Leistung beeinträchtigen kann. Das Element wird nur gerendert, wenn die Bedingung wahr wird, und aus dem DOM entfernt, wenn die Bedingung wieder falsch wird.

Wenn sich der Zustand jedoch wahrscheinlich häufig ändert, ist es besser, die zu verwenden v-zeigen Richtlinie, die die Leistung verbessert. Das ist weil v-zeigen verwendet CSS, um das Element auszublenden oder anzuzeigen, indem die CSS-Anzeigeeigenschaft zwischen none und block umgeschaltet wird, wodurch das Element immer im DOM gerendert wird.

Bedingtes Rendern in Ihrer Vue-App leicht gemacht

Sie haben gelernt, Inhalte in Vue-Apps mit den Anweisungen v-if und v-show bedingt zu rendern. Durch die Verwendung dieser Anweisungen können Sie Inhalte basierend auf verschiedenen Bedingungen schnell rendern, wodurch Sie mehr Kontrolle über das Erscheinungsbild und Verhalten Ihrer Vue-Komponenten erhalten.