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:theorie:05 [2025/03/14 12:24] – [LU05d - v-for - TBD] vdemiren:modul:m291:learningunits:lu05:theorie:05 [2025/03/21 14:31] (aktuell) vdemir
Zeile 1: Zeile 1:
-====== LU05e - v-for - TBD ======+====== LU05e - v-for ======
  
 ===== Learning ojectives ===== ===== Learning ojectives =====
-  - ...+  - I can explain what function v-for directives fulfil within the DOM. 
-  - +  - I can explain which data types v-for is suitable for
 +  - I can name the list display variants that are possible with v-for. 
 + 
 +===== Source ===== 
 +[[https://www.w3schools.com/vue/vue_v-for.php|W3School v-for]]
 ===== Introduction ==== ===== Introduction ====
-....+The **v-for** directive in Vue.js is a powerful tool for rendering (the process of converting data, code or digital instructions into a visual representation on the screen) lists of elements in HTML templatesIt allows developers to iterate through a data source and create a template element for each element in the data source (e.garray). In addition to basic lists, **v-for** can also be used to iterate (loop through) a series of numbers, object properties or even nested structures. By combining it with other directives such as **v-bind** and **v-on**, **v-for** extends the possibilities of interactive data binding in Vue applications. 
 + 
 + 
 +  <template> 
 +    <ul> 
 +      <li v-for="(item, index) in items" :key="index"> 
 +        {{ index + 1 }}. {{ item }} 
 +      </li> 
 +    </ul> 
 +  </template>
  
-===== TDB =====+  <script> 
 +  export default { 
 +    data() { 
 +      return { 
 +        items: ["Apple", "Banana", "Cherry"
 +      }; 
 +    } 
 +  }; 
 +  </script>
  
 +**Explanation**
 +  * The v-for="(item, index) in items" directive loops through the items array.
 +  * :key="index" helps Vue track each element efficiently.
 +  * The output will be a list displaying "Apple," "Banana," and "Cherry" in order.
  
  
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-...... |+to render ausgeben (Listen) | 
 +| to iterate | wiederholen, durchlaufen 
  
 ---- ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  
  • en/modul/m291/learningunits/lu05/theorie/05.1741951455.txt.gz
  • Zuletzt geändert: 2025/03/14 12:24
  • von vdemir