LU19a - Aufgabe 1 / Task 02: v-bind, v-if, ...

Füllen Sie die nachfolgenden Felder aus:

Klasse: ………………………………

Vorname: ……………………………

Name: ………………………………..

• Verwenden Sie als Basis zu dieser Aufgabe die Lösung LU05.S09.html
• Das entsprechende Bild, dass aktuell angezeigt wird, kann in Ihrer Lösung variieren (kann anders sein).

Beim Auftrag LU05.S09.html wurde der Lagerbestand von Schreibmaschinen in 4 Gruppen ausgegeben:

1. Plenty in Stock
2. In Stock
3. Very few left
4. Not in Stock

Die Hintergrundfarbe blieb bei allen 3 Meldungen gleich grün.

• Veränderung Sie die Anzeige dahingehend, dass bei jeder Meldung die Text-Hintergrundfarbe sich nach dem Ampelprinzip verändert.
  • Grün: Es hat an Lager bzw. es hat reichlich an Lager
  • Orange: Es hat weniger an Lager
  • rot: Es hat keine mehr an Lager
• Realisieren sie die Farbanpassungen anhand von 2 neuen CSS-Klassen outOfStockClass und lowStockClass, die mittels v-bind beim entsprechenden <p>-Tag eingebaut werden müssen.

Hinweis

• Das Bild ist nicht relevant.
• Der Farbton ist nicht relevant.

Zielzustand 1	Wenn es an Lager oder reichlich an Lager hat
Zielzustand 2	Es hat nur noch wenig an Lager
Zielzustand 3	Schreibmaschinen hat es keine an Lager

Volkan Demir