Vue Academy · Lektion

Bedingungen und Schleifen

Rendern Sie Inhalte mit v-if bedingt und Listen mit v-for

Bedingungen und Schleifen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Bedingtes Rendern

Mit Vue können Sie Teile der Benutzeroberfläche abhängig von Daten ein- oder ausblenden.

v-if rendert ein Element abhängig von einer Bedingung
v-else-if und v-else verknüpfen Bedingungen
v-show schaltet die Sichtbarkeit um

v-if

Die Direktive v-if rendert ein Element nur, wenn ihr Ausdruck einen wahren Wert ergibt.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if und v-else

Verknüpfen Sie Bedingungen mit v-else-if und v-else. Sie müssen direkt auf ein v-if folgen.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show rendert das Element immer, schaltet jedoch dessen CSS-Eigenschaft display um.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if und v-show im Vergleich

Der wichtigste Unterschied:

v-if fügt das Element vollständig zum DOM hinzu oder entfernt es daraus
v-show behält das Element im DOM und schaltet lediglich display um

Verwenden Sie v-show für Elemente, deren Sichtbarkeit häufig umgeschaltet wird. Verwenden Sie v-if, wenn sich die Bedingung selten ändert oder das Element aufwendig zu rendern ist.

v-for über Arrays

Die Direktive v-for rendert eine Liste, indem sie über ein Array iteriert.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for mit Index

Mit v-for können Sie auch den Index jedes Elements abrufen.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

Die Bedeutung von :key

Geben Sie bei der Verwendung von v-for immer einen eindeutigen :key an.

Dadurch kann Vue die Identität jedes Knotens verfolgen
Es ermöglicht effiziente und korrekte DOM-Aktualisierungen
Verwenden Sie eine stabile, eindeutige ID, nicht den Array-Index, wenn sich die Reihenfolge der Elemente ändern kann

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Warum :key wichtig ist

Ohne einen geeigneten Schlüssel verwendet Vue möglicherweise die falschen Elemente wieder, wenn sich die Liste ändert.

Formularfelder könnten den falschen Wert behalten
Animationen könnten fehlerhaft ablaufen
Der Status könnte der falschen Zeile zugeordnet werden

Ein stabiler, eindeutiger Schlüssel verhindert diese Fehler.

v-for über Objekte

Mit v-for können Sie über die Eigenschaftswerte eines Objekts iterieren und optional auch Schlüssel und Index abrufen.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

v-for und Bedingungen kombinieren

Um eine Liste zu filtern, verwenden Sie besser eine berechnete Eigenschaft, statt v-if auf dasselbe Element wie v-for zu setzen.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Schnelltest

Testen Sie Ihr Verständnis von Bedingungen und Schleifen.

Zusammenfassung: Bedingungen und Schleifen

Sie haben das bedingte Rendern und das Rendern von Listen kennengelernt:

v-if / v-else-if / v-else rendern abhängig von Bedingungen
v-show schaltet nur die Anzeige um
v-for iteriert über Arrays und Objekte
Fügen Sie immer einen eindeutigen :key hinzu
Filtern Sie Listen mit berechneten Eigenschaften

Als Nächstes geht es um Attribut- und Klassenbindungen.

Häufig gestellte Fragen

Ist die Lektion „Bedingungen und Schleifen“ kostenlos?

Ja — der vollständige Text von „Bedingungen und Schleifen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Bedingungen und Schleifen“?

Rendern Sie Inhalte mit v-if bedingt und Listen mit v-for Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Bedingungen und Schleifen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy