en:modul:m291:learningunits:lu05:aufgaben:15

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:15 [2025/03/14 16:56] – vdemiren:modul:m291:learningunits:lu05:aufgaben:15 [2025/03/28 11:38] (aktuell) – [Assignment 1] vdemir
Zeile 1: Zeile 1:
-====== LU05.A14 - v-show and v-if combined ======+====== LU05.A15 - v-for list rendering ======
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
   * Work type: Individual   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 15 Minutes +  * Timeframe: 10 Minutes 
-  * Expected result: A Vue script that uses both directives, v-if and v-show.+  * Expected result: A Vue script that uses the directives v-for with <ol> and <ul>
  
 ===== Learning objectives ===== ===== Learning objectives =====
-  -  Using v-show  to simple image examples. +  - Be able to explain the objective of v-for 
 +  - Displying the Index and corresponding array entry using v-for. 
 +  - Dispalying array elements and the corresponding images with v-for.
  
 ===== Source ===== ===== Source =====
-  * [[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-for_foodText | v-for code-example]] 
-  +
 ===== Assignment ====== ===== Assignment ======
-This assignment consists of using both, the v-if and the v-show, and comparing the html-dom reaktion.+Data is often available as lists/arrays (concatenation of persons, for example). Previously, we prepared these lists in JavaScript using a loop and passed them to HTML for display. With v-for, we can now use the loop directly in JS, which makes things a lot easier. 
 + 
 +  - Click on the provided link above and it with the appropriate name in your W3School workspace. 
 +  - Execute it with **Run**. You will see that the array data in the script part is now displayed numbered in the browser.    
 +  - Add 3-4 more entries to your food list, at the beginning, the middle part, and the end. 
 +  - Change the <ol>-tag to  <ul>-tag. 
 +  - Note down your observation as code comments and save your work.  
 + 
  
-  - 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. 
-  - Have it run by clicking the //run-button//. 
-  - Move the v-show from div-tag into the text-tag. Change the variable in the //script-area// from //showDiv// to //showText//. 
-  - 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//. 
-  - 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 ===== ===== Solution =====
 [[en:modul:m291:learningunits:lu05:loesungen:15|Lösung]] [[en:modul:m291:learningunits:lu05:loesungen:15|Lösung]]
 +
 +
  
  
Zeile 38: Zeile 37:
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| bulb | Glühbirne |+| ... | ... |
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/15.1741967810.txt.gz
  • Zuletzt geändert: 2025/03/14 16:56
  • von vdemir