Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| en:modul:m291:learningunits:lu05:loesungen:14 [2025/03/18 07:45] – angelegt vdemir | en:modul:m291:learningunits:lu05:loesungen:14 [2025/03/28 11:36] (aktuell) – vdemir | ||
|---|---|---|---|
| Zeile 5: | Zeile 5: | ||
| * You can execute the code by pressing the //run// button | * You can execute the code by pressing the //run// button | ||
| * The result will be presented in the right hand side of the window. | * The result will be presented in the right hand side of the window. | ||
| + | |||
| + | ===== 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 // | ||
| + | - 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 // | ||
| + | - Add another paragraph-tag for the //v-if// which contains a image and a suitable comment to it. | ||
| + | - The corresponding variable in the // | ||
| + | - Now we can seperately control the visibility of the text and image ressource. | ||
| + | - Try out all four values for the // | ||
| + | * 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 ===== | ||
| {{ : | {{ : | ||
| - | {{: | + | {{: |
| ---- | ---- | ||
| [[https:// | [[https:// | ||
| | | ||