en:modul:m291:learningunits:lu05:theorie:04

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:04 [2025/01/27 12:20] – vdemiren: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 ===== ===== 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 ==== ===== 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>   <script>
-    new Vue({ +    export default { 
-      el: '#app', +      data() { 
-      data: { +        return { 
-        isVisible: true +          isVisible: true 
-      }, +        };
-      methods: { +
-        toggleMessage() { this.isVisible = !this.isVisible;+
       }       }
-    } +    };
-    });+
   </script>   </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.+**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.
  
-===== Variants ===== +===== v-if VS v-show ===== 
-There are basically three variants of //v-if//:  +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. 
-  - v-if +
-  - v-else-of +
-  - v-else+
  
-==== 1. v-if ==== +===== Demonstration =====
-  * 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:** +[[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div2 | v-show VS v-if]]
-   +
-  <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> +  * **v-show:** Hides only an object, it is still accessible for fold-in or fold-out 
-  <p v-else-if="condition === 'B'">Condition B is true.</p>+  * **v-if:** The object of concern is no longer existing, as it was destroyed from the HTML-DOM.
  
-==== 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> 
  
 +^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 ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| to render | ausführen, wiedergeben | +| conditionally | bedingt | 
-| conjunction | verbindung |+| 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 [[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/04.1737976855.txt.gz
  • Zuletzt geändert: 2025/01/27 12:20
  • von vdemir