LU05.A13 - v-show applied to images

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 15 Minutes
• Expected result: A Vue script that fades-in and fades-out images.

1. Using v-show to simple image examples.

• v-show code-example

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.

1. Click the link above to the code-exambpe to get to the W3School-TryOut area.
2. Save the code with a suitable name, such as LU05.S13.html.
3. Have it run by clicking the run-button.
4. Search in the internet for images of bulbs and save it in your workspace in the director media
5. Create a own paragraph-tag.
6. 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 false.
7. Note the result as a html-comment und beobachten Sie die Reaktion der Applikation.
8. Save your result, you may need it as a exam-preparation.

Lösung

Volkan Demir