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:loesungen:15 [2025/03/21 15:40] vdemiren:modul:m291:learningunits:lu05:loesungen:15 [2025/03/28 11:39] (aktuell) vdemir
Zeile 1: Zeile 1:
-====== LU05.S14 - v-for list rendering =====+====== LU05.S15 - v-for list rendering =====
  
 ===== Hints ==== ===== Hints ====
Zeile 6: Zeile 6:
   * 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.
  
-===== Source code =====+===== Assignment ====== 
 +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.  
 + 
 +===== Solution ===== 
 {{ :en:modul:m291:learningunits:lu05:loesungen:lu05.s15.zip | Source code of the solution}} {{ :en:modul:m291:learningunits:lu05:loesungen:lu05.s15.zip | Source code of the solution}}
  
-{{:en:modul:m291:learningunits:lu05:loesungen:lu05.s15.png| v-for list rendering}}+{{:en:modul:m291:learningunits:lu05:loesungen:lu05.s15.png?1200| v-for list rendering}}
  
  
  • en/modul/m291/learningunits/lu05/loesungen/15.1742568057.txt.gz
  • Zuletzt geändert: 2025/03/21 15:40
  • von vdemir