Praktischer Leitfaden zum bedingten Rendering von Vue: Detaillierte Erläuterung der Verwendungstechniken von v-if, v-show, v-else, v-else-if

Vue Conditional Rendering Praktischer Leitfaden: Detaillierte Erläuterung der Verwendungstechniken von v-if, v-show, v-else, v-else-if

Vue.js ist ein Open-Source-JavaScript, das zum Erstellen interaktiver Front- Endschnittstellen-Framework, das flexible bedingte Rendering-Anweisungen bereitstellt, um bestimmte Elemente basierend auf unterschiedlichen Bedingungen anzuzeigen oder auszublenden. In Vue sind v-if, v-show, v-else und v-else-if eine unserer am häufigsten verwendeten Anweisungen für bedingtes Rendering. In diesem Artikel wird die Verwendung dieser Anweisungen detailliert beschrieben und entsprechende Codebeispiele bereitgestellt.

1. v-if und v-else

Die v-if-Direktive wird verwendet, um bestimmte Elemente basierend auf Bedingungen darzustellen. Wenn die Bedingung wahr ist, wird das Element gerendert, wenn die Bedingung falsch ist, wird das Element nicht gerendert.

Beispiel 1: l & lt; div & gt; a data () {

<h1 v-if="show">Hello, World!</h1>
<p v-else>Sorry, the element is hidden.</p>

} }

Wenn show im obigen Beispiel wahr ist, wird der Text im Element „h1“ angezeigt show ist falsch, der Text im „p“-Element wird angezeigt. Die

v-else-Direktive wird nach v-if verwendet und kann sofort innerhalb desselben Tags verwendet werden, um die entgegengesetzte Bedingung zu v-if auszudrücken.

Beispiel 2: l & lt; div & gt; {a data () {

return {
  show: true
}

} }

Wenn im obigen Beispiel der Wert von show true ist, wird der Text im Element „h1“ angezeigt, wenn der Wert von show false ist , wird der Text im Element „h3“ angezeigt.

v-show

Der Befehl v-show ähnelt v-if und wird auch verwendet, um das Anzeigen und Ausblenden von Elementen unter bestimmten Bedingungen zu steuern. Der Unterschied besteht darin, dass v-show das Anzeigeattribut von CSS verwendet, um die Anzeige und das Ausblenden von Elementen zu ändern, anstatt Elemente direkt zu löschen oder hinzuzufügen.

Beispiel 3: l & lt; div & gt; a data () {

<h1 v-if="show">Hello, World!</h1>
<h3 v-else>Title</h3>

} }

Wenn im obigen Beispiel der Wert von show true ist, wird der Text im Element „h1“ angezeigt, wenn der Wert von show false ist. Der Text im Element „p“ wird angezeigt.

v-else-if

Die v-else-if-Direktive ähnelt der v-else-Direktive, erlaubt uns jedoch, mehrere aufeinanderfolgende Bedingungen festzulegen. Dies ist sehr nützlich, wenn Sie die Direktiven v-if und v-else verwenden.

Beispiel 4: l & lt; div & gt; a data () {

return {
  show: true
}

} }

2. Im obigen Beispiel werden verschiedene Textebenen basierend auf dem Wert der Variablen „score“ angezeigt. Bestimmen Sie anhand des Score-Werts zunächst, ob er größer oder gleich 90 ist. Wenn ja, zeigen Sie den Text im Element „h1“ an. Andernfalls bestimmen Sie, ob er größer oder gleich 80 ist. Wenn ja, zeigen Sie an Text im „h2“-Element usw.

Zusammenfassend lässt sich sagen, dass v-if, v-show, v-else und v-else-if häufig verwendete bedingte Rendering-Anweisungen in Vue.js sind. Wählen Sie basierend auf der tatsächlichen Situation aus, welche Anweisung verwendet werden soll, um den gewünschten Effekt zu erzielen, und Sie können Elemente nach Bedarf ein- oder ausblenden. Beim Schreiben von Code kann die rationelle Verwendung dieser Anweisungen die Codestruktur optimieren und die Lesbarkeit und Wartbarkeit des Codes verbessern. Ich hoffe, dieser Artikel wird Ihnen bei der Vue-Entwicklung hilfreich sein.

(Hinweis: Der obige Beispielcode dient nur als Referenz. Bitte ändern Sie ihn entsprechend der tatsächlichen Situation, wenn Sie ihn verwenden.)

Das obige ist der detaillierte Inhalt vonPraktischer Leitfaden zum bedingten Rendering von Vue: Detaillierte Erläuterung der Verwendungstechniken von v-if, v-show, v-else, v-else-if. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!