LU19a - Aufgabe 1 / Task 06: 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.

• Neu soll das Foto nur eingeblendet werden, wenn es Schreibmaschinen an Lager hat.
• Zusätzlich soll die verfügbare Anzahl hinter der Meldung ausgegeben werden.
• 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.
  • 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

Hinweis

• Das Bild und ist nicht relevant.
• Die Position vom Bild ist nicht relevant.
• Der Farbton ist nicht relevant.

Zielzustand 1	Wenn es an Lager oder reichlich an Lager hat, ist das Bild zu sehen und und die Meldung in grün.
Zielzustand 2	Es hat nur noch wenig an Lager, das Bild ist immer noch zu sehen. Die Meldung ist orange.
Zielzustand 3	Schreibmaschinen hat es keine an Lager, das Bild wird ausgeblendet, die Meldung erfolgt in rot.

Volkan Demir