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

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 gün.

• Veränderung Sie die Anzeige dahingehend, dass bei jeder Meldung die Text-Hindergrundfarbe sich nach dem Ampelprinzip verändert.
  • Grün: Es hat genug Lagerbestand
  • Orange: Es hat weniger an Lager
  • Grün: Es hat an Lager bzw. es hat reichlich 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.

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

Volkan Demir