Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:theorie:05 [2025/01/23 12:53] – angelegt vdemir
+++ en:modul:m291:learningunits:lu05:theorie:05 [2025/03/21 14:31] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05d - v-show- TBD ======
+====== LU05e - v-for ======
 ===== 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 ====
-....
+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 templates. It allows developers to iterate through a data source and create a template element for each element in the data source (e.g. array). 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 =====
 ^ 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