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

===== Administration =====
Füllen Sie die nachfolgenden Felder aus:

**Klasse:** ....................................

**Vorname:** ...................................

**Name:** ......................................

===== Vorarbeit =====
  * 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).


===== Ausgangslage =====
Beim Auftrag **LU05.A09.html** wurde der Lagerbestand von Schreibmaschinen in Gruppen ausgegeben: 
  - //Plenty in Stock//
  - //In Stock//
  - //Very few left// 
  - //Not in Stock//

Die Hintergrundfarbe blieb bei allen Meldungen grün.

{{:en:modul:m291:learningunits:lu19:theorie:lu09.s09_start.png?400|}}


===== Auftrag =====
  * 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 | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel1.png?400|}} |
^Zielzustand 2 | Es hat nur noch **wenig an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel2.png?400|}} | 
^Zielzustand 3 | Schreibmaschinen hat es **keine an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:ta02_ziel3.png?400|}} |

-----

[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir