LU05.A14 - v-show and v-if combined

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 15 Minutes
• Expected result: A Vue script that uses both directives, v-if and v-show.

1. Using v-show to simple image examples.

• v-show code-example

This assignment consists of using both, the v-if and the v-show, and comparing the html-dom reaktion.

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. Move the v-show from div-tag into the text-tag. Change the variable in the /script-area from showDiv to showText - Add into your p-tag a attribute v-if. The corresponding variable for that v-if is called showImage which can also contain the values true and false. - Now we can seperately control the visibility of the text and image ressource. - Try out all four values for the showText and showImage. Possible falues are - true / true - true / false - false / true - false / false - 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 ===== Lösung ===== Vocabulary ===== ^ English ^ German ^ | bulb | Glühbirne | —- Volkan Demir