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

===== Prerequisites  =====
  * 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.

===== Learning objectives =====
  -  Using v-show  to simple image examples. 

===== Source =====
  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div | v-show code-example]]
  
===== Assignment ======
This assignment consists of using both, the v-if and the v-show, and comparing the html-dom reaktion.

  - 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.S14.html.
  - Have it run by clicking the //run-button//.
  - Just after the //div-tag// create a paragraph and move the current text in it (This text can be hidden).
  - Move the v-show from div-tag into the paragraph-tag. 
  - Change the variable in the //script-area// from //showDiv// to //showText//.
  - Add another paragraph-tag for the //v-if// which contains a image and a suitable comment to it.
  - The corresponding variable in the //script-area// for the 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 combination of values 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 =====
[[en:modul:m291:learningunits:lu05:loesungen:14|Lösung]]



===== Vocabulary =====
^ English ^ German ^ 
| bulb | Glühbirne |



----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir