v-for

Murat2810 · Oct 1, 2022 · 269b1a7 · 269b1a7
1 parent 35e9337
commit 269b1a7
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 7 deletions.
diff --git a/SoloUebungen/index.html b/SoloUebungen/index.html
@@ -22,8 +22,8 @@
         <br />
         We wish you a pleasant day.
       </p>
-
-      // v-bind per element method
+<hr>
+<!-- v-bind per element method -->
       <img v-bind="imgAttrs">
       <br><br><br>
       <p>Image Größe wird in Vue definiert</p>
@@ -32,6 +32,50 @@
       :src= "`https://picsum.photos/${width}/${height}`" 
       alt="Something random from picsum">
 
+<!-- v-for mit Basic Array -->
+      <hr>
+      <h1>v-for mit Basic Array</h1>
+      <h2>Fruits in the Basket      </h1>
+        <ul>
+          <li v-for="fruit in fruits" :key="fruit">{{fruit}}</li>
+        </ul>
+
+        <!-- v-for mit Basic Array mit index -->
+      <hr>
+      <h1>v-for mit Basic Array mit index</h1>
+      <h2>Fruits in the Basket      </h1>
+        <ul>
+          <li v-for="(fruit, index) in fruits" :key="fruit">
+            {{index}} - {{fruit}}</li>
+        </ul>
+
+
+ <!-- v-for mit object literal -->  
+      <h1>v-for mit object literal</h1>
+      <h2>Fruits in the Basket Emojis</h1>
+        <ul>
+          <li v-for="(emoji, name) in fruitsObjects" :key="name"> {{emoji}} - <strong>{{name}}</strong></li>
+        </ul>
+                <hr>
+
+         <!-- v-for mit json ähnlichen Daten-->  
+      <h1>v-for mit json ähnlichen Daten</h1>
+      <h2>Fruits in the Basket Json</h1>
+        <ul>
+          <li v-for="(fruit, index) in fruitsJson" :key="fruit.id">
+            {{index}}-{{fruit.emoji}} - <strong>{{fruit.name}}</strong>-
+          </li>
+        </ul>
+
+                 <!-- v-for mit json ähnlichen Daten mit index-->  
+      <h1>v-for mit json ähnlichen Daten mit index</h1>
+      <h2>Fruits in the Basket Json</h1>
+        <ul>
+          <li v-for="(fruit, index) in fruitsJson" :key="fruit.id">
+            {{index}}-{{fruit.emoji}} - <strong>{{fruit.name}}</strong>-
+          </li>
+        </ul>
+
     </div>
 
     <script src="https://unpkg.com/vue@next"></script>

diff --git a/SoloUebungen/script.js b/SoloUebungen/script.js
@@ -6,14 +6,65 @@ const app = Vue.createApp({
         "Dieser Text ist mit vue.js kompiliert! Attribut v-text",
       width: 400,
       height: 400,
-      
+
       // v-bind per element method
       imgAttrs: {
         class: "red",
         src: "https://picsum.photos/200/300",
         alt: "Hard to describe",
         title: "Something random from picsum",
       },
+
+      // v-for mit Basic Array
+      fruits: [
+        "Apple",
+        "Banana",
+        "Melon",
+        "Blueberry",
+        "Strawberry",
+        "Ananas",
+        "Mango",
+      ],
+
+
+      // v-for mit object literal
+      fruitsObjects: {
+        Apple: "🍎",
+        Banana: "🍌",
+        Melon: "🍉",
+        Strawberry: "🍓",
+        Ananas: "🍍",
+      },
+
+      // v-for mit json ähnlichen Daten
+      fruitsJson: [
+         	{
+        id: 41,
+        name: "Apple",
+        emoji: "🍎",
+     	},
+        {
+        id: 22,
+        name: "Melon",
+        emoji: "🍉",
+	},
+        {
+        id: 32,
+        name: "Banana",
+        emoji: "🍌",
+	},
+	{
+	id: 92,
+        name: "Strawberry",
+        emoji: "🍓",
+	},
+	{      
+	id: 52,
+        name: "Ananas",
+        emoji: "🍍",
+	},
+      ],
+
     };
   },
   directives: {

diff --git a/attribute-binding/index.html b/attribute-binding/index.html
@@ -25,7 +25,7 @@
     </header>
     <main>
       <div id="app" class="inside">
-        <h1>{{ headline }}</h1>
+        <h1 :id="headline.replace(/\s/g, '-').toLowerCase()">{{ headline }}</h1>
         <p>
           Directives are special attributes with the <code>v-</code> prefix.
           Directive attribute values are expected to be
@@ -35,11 +35,10 @@ <h1>{{ headline }}</h1>
           DOM when the value of its expression changes. Let's review the example
           we saw in the introduction:
         </p>
-        <img :="imageAttrs">
+        <img :="imageAttrs" />
       </div>
-
     </main>
     <script src="https://unpkg.com/vue@next"></script>
     <script src="scripts.js"></script>
   </body>
-</html>
+</html>