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.
5. 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.
6. Now we can seperately control the visibility of the text and image ressource.
7. Try out all four values for the showText and showImage. Possible combination of values are
   1. true / true
   2. true / false
   3. false / true
   4. false / false
8. Note the result as a html-comment und beobachten Sie die Reaktion der Applikation.
9. Save your result, you may need it as a exam-preparation.

Lösung

Volkan Demir