Direktiven: v-if, v-for, v-bind, v-on
Rendern Sie mit v-if und v-show bedingt, durchlaufen Sie mit v-for Listen, binden Sie Attribute dynamisch mit v-bind und reagieren Sie mit v-on auf DOM-Ereignisse.
Direktiven: v-if, v-for, v-bind, v-on ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Vue-Direktiven?
Direktiven sind spezielle Attribute mit dem Präfix v-, die Vue anweisen, etwas mit einem DOM-Element zu tun. Sie werden als JavaScript-Ausdrücke ausgewertet und reagieren auf Änderungen reaktiver Daten.
v-if, v-else-if, v-else
v-if rendert ein Element abhängig davon, ob ein Ausdruck einen Wahrheitswert ergibt. Wenn der Ausdruck false ist, wird das Element vollständig aus dem DOM entfernt. v-else stellt die Alternative bereit.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show – Sichtbarkeit umschalten
v-show schaltet CSS display: none um, anstatt das Element zum DOM hinzuzufügen oder daraus zu entfernen. Verwenden Sie v-show, wenn die Sichtbarkeit häufig umgeschaltet wird, und v-if, wenn sich die Bedingung selten ändert.
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for – Listen rendern
v-for="item in items" rendert das Element für jedes Element in der Liste. Fügen Sie für stabile Aktualisierungen immer :key hinzu.
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>v-for mit einem Objekt
Iterieren Sie über die Werte eines Objekts oder über Schlüssel-Wert-Paare.
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind – Attribute binden
v-bind:attr oder die Kurzform :attr bindet ein HTML-Attribut dynamisch an einen reaktiven Wert.
<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>Objektsyntax für v-bind
Binden Sie mehrere Attribute gleichzeitig mithilfe eines Objekts.
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">Klassenbindung: :class
Binden Sie CSS-Klassen bedingt mit einem Objekt (Schlüssel = Klassenname, Wert = Bedingung) oder einem Array.
<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>
<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">
<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"Style-Binding: :style
Binden Sie Inline-Styles mit einem Objekt in camelCase.
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on – Auf Ereignisse reagieren
v-on:event oder die Kurzform @event fügt Ereignis-Listener hinzu.
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>Ereignismodifikatoren
Vue bietet integrierte Ereignismodifikatoren: .prevent (preventDefault), .stop (stopPropagation), .once (wird einmal ausgelöst), .self (nur wenn das Ziel das Element selbst ist) und .passive (verbessert die Scroll-Performance).
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">Schnelltest
Wann sollten Sie v-show anstelle von v-if verwenden?
Zusammenfassung: Vue-Direktiven
v-if entfernt Elemente aus dem DOM bzw. fügt sie hinzu. v-show schaltet die Anzeige um. v-for rendert Listen (immer mit :key). v-bind (:) bindet Attribute sowie :class und :style. v-on (@) fügt Ereignis-Listener hinzu. Ereignismodifikatoren: .prevent, .stop und .once. v-model dient für bidirektionales Binding (kombiniert v-bind:value und v-on:input).
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Direktiven: v-if, v-for, v-bind, v-on“ kostenlos?
Ja — der vollständige Text von „Direktiven: v-if, v-for, v-bind, v-on“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Direktiven: v-if, v-for, v-bind, v-on“?
Rendern Sie mit v-if und v-show bedingt, durchlaufen Sie mit v-for Listen, binden Sie Attribute dynamisch mit v-bind und reagieren Sie mit v-on auf DOM-Ereignisse. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 3 von 4.
Wie lange dauert die Lektion „Direktiven: v-if, v-for, v-bind, v-on“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Vue SFC: script, template, style
- Options API: data, methods, computed
- Direktiven: v-if, v-for, v-bind, v-on
- Komponenten-Props und Emits