Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:theorie:04 [2025/01/27 12:03] – vdemir
+++ en:modul:m291:learningunits:lu05:theorie:04 [2025/03/14 13:46] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05d - v-if - TBD ======
+====== LU05d - v-show ======
 ===== Learning ojectives =====
-  - I can explain what function v-if directives fulfil within the DOM.
+  - I can explain what directive v-show fulfil within the DOM.
-  - I can name the three v-if variants that are possible in principle.
+  - I can prove the visibility of objects using v-show.
-  - I can apply v-if to specific examples.
+  - I can use the v-show directive.
+====== Sources ======
+  * [[https://www.w3schools.com/vue/vue_v-show.php|W3School | W3School | Conditional Rendering - v-show]]
+  * [[https://vuejs.org/guide/essentials/conditional.html#v-show | Vuejs.org | Conditional Rendering - v-show]]
 ===== 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.
+The v-show directive in Vue.js is used to conditionally display elements based on a boolean expression. //Unlike v-if, which completely removes elements from the DOM when the condition is false//, v-show toggles the CSS display property, keeping the element in the DOM but hiding it visually. This makes v-show more efficient when elements need to be frequently shown or hidden without re-rendering. It is best suited for UI toggles, such as modals, dropdowns, or tooltips.
+The syntax is simple: isVisible controls the visibility of the element dynamically
+  <div v-show="isVisible">Content</div>
+===== Example =====
+  <template>
+    <div>
+      <button @click="isVisible = !isVisible">
+        Toggle Message
+      </button>
+      <p v-show="isVisible">Hello, Vue.js!</p>
+    </div>
+  </template>
-  <div id="app">
-    <button @click="toggleMessage">Toggle Message</button>
-    <p v-if="isVisible">Hello, Vue.js!</p>
-  </div>
   <script>
-    new Vue({
+    export default {
-      el: '#app',
+      data() {
-      data: {
+        return {
-        isVisible: true
+          isVisible: true
-      },
+        };
-      methods: {
-        toggleMessage() { this.isVisible = !this.isVisible;
       }
-    }
+    };
-    });
   </script>
+**Explanation:**
+  * The v-show="isVisible" directive controls the visibility of the <p> element.
+  * Clicking the button toggles isVisible between true and false.
+  * Instead of removing the element from the DOM, Vue modifies its display property.
-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.
+===== v-if VS v-show =====
+Both, v-if and v-show are conditional rendering, but unlike v-if, the v-show directive **only** make the object of concern **invisible**, for it is yet hidden part of the HTML-DOM.
-===== TDB =====
+===== Demonstration =====
+[[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div2 | v-show VS v-if]]
+  * **v-show:** Hides only an object, it is still accessible for fold-in or fold-out
+  * **v-if:** The object of concern is no longer existing, as it was destroyed from the HTML-DOM.
+^Feature	^v-if	^v-show ^
+| DOM Behavior | Completely adds/removes elements from the DOM | Only toggles the display property (keeps elements in the DOM) |
+| Performance | Better for infrequent changes (expensive re-rendering) | Better for frequent toggling (faster updates) |
+| Usage Case | When elements are rarely shown/hidden | When elements need to be toggled frequently |
 ===== Vocabulary =====
 ^ English ^ German ^
-| ...| ... |
+| conditionally | bedingt |
+| to fold in/out | einklppen/ausklappen |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir