Bedingtes Rendering verwenden
Bei der Arbeit mit datengesteuerten Anwendungen müssen Sie in der Regel die Anzeige auf der Grundlage bestimmter Werte aktualisieren können. Sie müssen möglicherweise die Farbe ändern, um eine Warnung anzuzeigen, eine nicht verfügbare Option deaktivieren oder ein Steuerelement nicht anzeigen. Vue.js bietet diverse Anweisungen, um zu steuern, ob und wie Elemente angezeigt werden.
Sichtbarkeit umschalten
Sie können ein angezeigtes Element steuern, indem Sie die v-show-Anweisung verwenden. v-show überprüft einen booleschen Wert oder Ausdruck und bestimmt dann, ob eine Komponente angezeigt werden soll. Wie Sie sich vielleicht bereits denken, bedeutet true, dass sie angezeigt wird, und false, dass sie nicht angezeigt wird.
Das folgenden Beispiel zeigt die Verwendung von v-show mit einem Ausdruck der zu true oder false ausgewertet wird:
<div v-show="new Date().getMonth() < 3">It is the first quarter</div>
Hinweis
Sie können gültiges JavaScript in einer beliebigen Anweisung oder innerhalb der doppelten geschweiften Klammern ({{ }}) verwenden.
Boolesche Logik
Vue.js unterstützt drei Anweisungen zum Implementieren von boolescher Logik: v-if, v-else-if und v-else. Wie Sie vielleicht erwarten, lassen sich die Anweisungen mit den klassischen if-, else if- und else-Anweisungen abbilden.
<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>
Die vorhergehenden Beispiele funktionieren, da die if-Anweisungen sich wie if-Blöcke in JavaScript verhalten. Wenn ein true-Wert erkannt wird, wird der Block beendet. Wenn der zurückgegebene Monat also 2 für März ist (die Zählung der Kalendermonate beginnt mit 0), würde er in der ersten Zeile zu true ausgewertet werden und die Auswertungen der nächsten drei Zeilen würden übersprungen werden.