Bindungen von Attributen und Klassen
Binden Sie Attribute, Klassen und Styles dynamisch
Bindungen von Attributen und Klassen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Klassen und Styles binden
Häufig müssen Sie die Klasse oder den Style eines Elements abhängig von seinem Zustand ändern.
Vue behandelt :class und :style speziell, sodass Sie Objekte und Arrays statt nur Zeichenketten übergeben können.
:class-Objektsyntax
Übergeben Sie ein Objekt an :class. Die Schlüssel sind Klassennamen; Eigenschaften mit einem wahren Wert werden übernommen.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Statische und dynamische Klassen kombinieren
Ein statisches class-Attribut und ein dynamisches :class-Attribut werden zusammengeführt.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>:class-Array-Syntax
Übergeben Sie ein Array, um eine Liste von Klassen anzuwenden.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Bedingungen im Array
Sie können bedingte Ausdrücke innerhalb des Arrays kombinieren.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Inline-Styles binden
Die Direktive :style bindet Inline-Styles mithilfe eines Objekts.
Verwenden Sie Eigenschaftsnamen in camelCase wie fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style mit einem Array
Sie können ein Array aus Style-Objekten übergeben, die Vue zusammenführt.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Automatische Präfixe
Wenn eine CSS-Eigenschaft Vendor-Präfixe benötigt, kann Vue diese automatisch hinzufügen, sofern der Browser dies unterstützt.
- Sie schreiben die standardmäßige Eigenschaft
- Vue wendet bei Bedarf das richtige Präfix an
Dadurch bleiben Ihre Style-Bindings übersichtlich.
Dynamisches Attribut-Binding
Jedes Attribut kann mit :attr dynamisch gebunden werden.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Boolesche Attribute
Bei booleschen Attributen wie disabled fügt Vue das Attribut nur ein, wenn der Wert truthy ist.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Mehrere Klassen bedingt binden
Ein praktisches Beispiel, bei dem mehrere Klassen gleichzeitig ein- und ausgeschaltet werden.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Kurztest
Testen Sie Ihr Verständnis von Klassen- und Style-Bindings.
Zusammenfassung: Attribut- und Klassen-Bindings
Sie haben dynamische Bindings kennengelernt:
- Die Objekt-Syntax von :class schaltet Klassen anhand von truthy-Werten ein und aus
- Die Array-Syntax von :class wendet eine Liste an
- :style bindet Inline-Styles mit Schlüsseln in camelCase
- Jedes Attribut kann mit :attr gebunden werden
- Boolesche Attribute erscheinen nur bei truthy-Werten
Als Nächstes: Grundlagen von Komponenten und Kommunikation.
Häufig gestellte Fragen
Ist die Lektion „Bindungen von Attributen und Klassen“ kostenlos?
Ja — der vollständige Text von „Bindungen von Attributen und Klassen“ 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 „Bindungen von Attributen und Klassen“?
Binden Sie Attribute, Klassen und Styles dynamisch 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 3 von 3.
Wie lange dauert die Lektion „Bindungen von Attributen und Klassen“?
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
- Interpolation und Direktiven
- Bedingungen und Schleifen
- Bindungen von Attributen und Klassen