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

Füllen Sie die nachfolgenden Felder aus:

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

Vorname: ……………………………..

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

• Sie können als Vorlage für diese Aufgabe die Lösung LU05.S09.html verwenden.
• Das entsprechende Bild, dass aktuell angezeigt wird, kann in Ihrer Lösung variieren (kann anders sein).

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

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

Die Hintergrundfarbe blieb bei allen Meldungen 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.
• Der jeweilige Warenbestand muss auch angezeigt werden.

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