Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:theorie:03 [2025/02/28 13:10] – vdemir
+++ en:modul:m291:learningunits:lu05:theorie:03 [2025/03/14 12:36] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05c - v-if - TBD ======
+====== LU05c - v-if ======
 ===== Learning ojectives =====
-  - ???
+  - I can explain what the directive v-if fulfil within the DOM.
-  -
+  - I can name the three v-if variants that are possible in principle.
+  - I can apply v-if to specific examples.
+===== Sources =====
+  * [[https://www.w3schools.com/vue/vue_v-if.php | W3School - v-if]]
+  * [[https://vuejs.org/guide/essentials/conditional.html | Vue.org - v-if ]]
 ===== Introduction ====
-???
+The v-if directive in Vue.js is used to conditionally render elements in the DOM. If the condition provided in the //v-if// evaluates to true, the element is rendered; otherwise, it is removed from the DOM entirely. This makes v-if a powerful tool for controlling the visibility of elements based on dynamic data.
-===== TDB =====
+  <div id="app">
+    <button @click="toggleMessage">Toggle Message</button>
+    <p v-if="isVisible">Hello, Vue.js!</p>
+  </div>
+  <script>
+    new Vue({
+      el: '#app',
+      data: {
+        isVisible: true
+      },
+      methods: {
+        toggleMessage() { this.isVisible = !this.isVisible;
+      }
+    }
+    });
+  </script>
+In this example above, the paragraph element (<p>) is conditionally displayed based on the value of the //isVisible// data property. Clicking the button toggles the message's visibility.
+===== Variants =====
+There are basically three variants of //v-if//:
+  - v-if
+  - v-else-if
+  - v-else
+==== 1. v-if ====
+  * Used to conditionally render an element based on whether the condition evaluates to //true//.
+  * If the condition is //false//, the element is completely removed from the DOM.
+**Example:**
+  <p v-if="isVisible">This is visible when isVisible is true.</p>
+==== 2. v-else-if ====
+  * Used to create an additional condition in conjunction with //v-if//.
+  * orks like an //else-if// statement in programming, allowing multiple conditions to be checked.
+  <p v-if="condition === 'A'">Condition A is true.</p>
+  <p v-else-if="condition === 'B'">Condition B is true.</p>
+==== 3. v-else ====
+  * Provides a fallback for when none of the //v-if// or //v-else-if// conditions are met.
+  * It does not accept any condition and must directly follow //v-if// or //v-else-if//.
+  <p v-if="condition === 'A'">Condition A is true.</p>
+  <p v-else-if="condition === 'B'">Condition B is true.</p>
+  <p v-else>Neither condition A nor B is true.</p>
+===== Additional Material =====
+{{:en:modul:m291:learningunits:lu05:theorie:vuejs_tutorial_10_v-if_v-else_v-else-if_conditional_rendering.mp4|Youtube-Tutorial: conditional rendering}}
 ===== Vocabulary =====
 ^ English ^ German ^
-| ...| ... |
+| to render | ausführen, wiedergeben |
+| conjunction | verbindung |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir