Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
en:modul:m291:learningunits:lu05:loesungen:13 [2025/01/28 14:58] – vdemir | en:modul:m291:learningunits:lu05:loesungen:13 [2025/03/28 11:23] (aktuell) – vdemir | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== LU05.S13 - v-if in WEBSTORM (A08 + A09 + A10 + A11 + A12) - TBD ====== | + | ====== LU05.S13 - v-show simple applied to images ====== |
+ | |||
+ | ===== Hints ==== | ||
+ | * Download the file and copy the content into the code area of the W3School on the left hand side of the coding window. | ||
+ | * You can execute the code by pressing the //run// button | ||
+ | * The result will be presented | ||
+ | |||
+ | ===== Assignment ====== | ||
+ | This assignment about fading-in and fading-out of images by using the vue-directive v-show in the concerning HTML-Tag. Similar to the previous assignment this is realized by changing the value of the v-show-attribute between //TRUE// and //FALSE//. | ||
+ | |||
+ | - Click the link above to the code-exambpe to get to the W3School-TryOut area. | ||
+ | - Save the code with a suitable name, such as LU05.S13.html. | ||
+ | - Have it run by clicking the // | ||
+ | - Search in the internet for images of bulbs and save it in your workspace in the director //media// | ||
+ | - Create a own image-tag. | ||
+ | - Use the v-show directive for the visibality of the bulb by stearing it with the //v-show// by changing the value of //showDiv// between //true// and // | ||
+ | - Note the result as a html-comment und beobachten Sie die Reaktion der Applikation. | ||
+ | - Save your result, you may need it as a exam-preparation. | ||
+ | |||
+ | ===== Solution | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ---- | ||
+ | [[https:// | ||
+ | |