In diesem Tutorial lernen wir, das bedingte Rendering in Vue.js
zu verstehen.
Was ist bedingtes Rendern?
Bedingtes Rendern bedeutet, dass, wenn eine bestimmte Bedingung wahr ist, aus dom
Hinzufügen oder Elemente aus entfernen.
In Vue
müssen wir die v-if
-Direktive verwenden, um das Element bedingt darzustellen.
Sehen wir uns ein Beispiel an:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
Im obigen Code haben wir eine isActive
-Direktive mit dem Attribut v-if
hinzugefügt. Wenn das isActive
-Attribut also true
ist, h1
-Elemente werden nur in dom
gerendert.
Wir können die v-if
-Direktive auch nach der v-else
-Direktive erweitern.
1 2 |
|
Wenn das isActive
-Attribut wahr ist, wird das erste h1
-Element gerendert, andernfalls wird das zweite h1
-Element in dom
gerendert.
Wir können es auch mit dem v-else-if
-Block weiter erweitern.
1 2 3 |
|
In JavaScript
funktioniert die v-else-if
-Direktive wie ein else-if
-Block.
Hinweis: Auf ein v-else
-Element muss unmittelbar ein v-if
-Element oder ein v-if-else
-Element folgen, sonst wird es nicht erkannt.
Wie rendere ich mehrere Elemente bedingt?
Manchmal müssen wir mehrere Elemente bedingt rendern, in diesem Fall müssen wir die Elemente in Together kombinieren.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Hier gruppieren wir mehrere Elemente innerhalb des div
-Tags.
Verwandte Empfehlungen: „Javascript-Tutorial“
In diesem Artikel geht es um die detaillierte Erklärung des bedingten Renderings in Vue.js I Ich hoffe, es hilft Freunden, die Hilfe brauchen!
Das obige ist der detaillierte Inhalt vonWie versteht man bedingtes Rendering in Vue.js? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!