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

• 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 in the right hand side of the window.

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.S14.html.
3. Have it run by clicking the run-button.
4. Just after the div-tag create a paragraph and move the current text in it (This text can be hidden).
5. Move the v-show from div-tag into the paragraph-tag.
6. Change the variable in the script-area from showDiv to showText.
7. Add another paragraph-tag a attribute v-if.
8. The corresponding variable in the script-area for the v-if is called showImage which can also contain the values true and false.
9. Now we can seperately control the visibility of the text and image ressource.
10. Try out all four values for the showText and showImage. Possible combination of values are
    • true / true
    • true / false
    • false / true
    • false / false
11. Note the result as a html-comment und beobachten Sie die Reaktion der Applikation.
12. Save your result, you may need it as a exam-preparation.

Codesolution of v-show simple

Volkan Demir