Aus dem Kurs: Vue.js lernen
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Attribut-Binding
Wir haben bereits gesehen, wie man den Inhalt von HTML-Elementen dynamisch setzen kann, indem man diese Syntax mit den doppelten geschweiften Klammern verwendet. Wie kann man nun aber den Wert von Attributen dynamisch setzen? Das braucht man bspw., wenn man ein Bild ausgeben lassen möchte. Ich habe dafür unser Beispiel einmal etwas vereinfacht, oben etwas Code rausgelöscht, den wir nicht brauchen. Unten gibt es wie gehabt unser Objekt und da habe ich nun ergänzt eine Eigenschaft image und die ist auf diesen Bildpfad gesetzt und dieses Bild möchte ich anzeigen lassen. Schauen wir uns mal an, wie das funktioniert. Erst mal brauche ich das img-Element in HTML, dann brauche ich das src-Attribut und ich sollte auf jeden Fall noch einen Alternativtext angeben. Wie bekomme ich das hier aber nun hier oben rein? Die erste Möglichkeit, die man versuchen kann, ist, dass man dieselbe Syntax nimmt wie bisher, also dass ich mal schreibe person.image, aber das funktioniert nicht. Und wenn wir uns…
Inhalt
-
-
-
-
(Gesperrt)
Templates mit Mustache4 Min. 37 Sek.
-
(Gesperrt)
Attribut-Binding3 Min. 35 Sek.
-
Klassen dynamisch setzen3 Min. 14 Sek.
-
(Gesperrt)
Eventhandling einsetzen5 Min. 22 Sek.
-
(Gesperrt)
Eventmodifier verwenden1 Min. 49 Sek.
-
(Gesperrt)
Form Input Binding2 Min. 40 Sek.
-
(Gesperrt)
Konditionales Rendering2 Min. 57 Sek.
-
(Gesperrt)
Schleifen verwenden2 Min. 40 Sek.
-
(Gesperrt)
Berechnete Werte1 Min. 55 Sek.
-
(Gesperrt)
Sortierbare Tabelle3 Min. 2 Sek.
-
(Gesperrt)
Live Cycle Hooks4 Min. 25 Sek.
-
Challenge: Einkaufsliste2 Min. 36 Sek.
-
(Gesperrt)
Solution: Einkaufsliste4 Min. 10 Sek.
-
(Gesperrt)
-