Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:14 [2025/03/14 16:29] – angelegt vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:14 [2025/03/28 11:36] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.A13 - v-show applied to images ======
+====== LU05.A14 - v-show and v-if combined ======
 ===== Prerequisites  =====
@@ Zeile 5: / Zeile 5: @@
   * Means of aid: only teaching materials, no websearch, no use of ai.
   * Timeframe: 15 Minutes
-  * Expected result: A Vue script that fades-in and fades-out images.
+  * Expected result: A Vue script that uses both directives, v-if and v-show.
 ===== Learning objectives =====
@@ Zeile 11: / Zeile 11: @@
 ===== Source =====
-  * [[ool: <a href="https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div | v-show code-example]]
+  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div | v-show code-example]]
 ===== Assignment ======
-This assignment about fading-in and fading-out of images by using the vue-directive v-show in the concerning HTML-Tag. Similar to the previous assignment this is realized by changing the value of the v-show-attribute between //TRUE// and //FALSE//.
+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.S13.html.
+  - Save the code with a suitable name, such as LU05.S14.html.
   - Have it run by clicking the //run-button//.
-  - Search in the internet for images of bulbs and save it in your workspace in the director //media//
+  - Just after the //div-tag// create a paragraph and move the current text in it (This text can be hidden).
-  - Create a own paragraph-tag.
+  - Move the v-show from div-tag into the paragraph-tag.
-  - Use the v-show directive for the visibality of the bulb by stearing it with the //v-show// by changing the value of //showDiv// between //true// and //false//.
+  - 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.