Kapitel 9: Vue Directive (Teil 2) - Bedingte Rendering

📗 Lernziel: v-if, v-else, v-show meistern!

---

9.1 v-if / v-else / v-else-if - Bedingte Rendering

v-if rendert Elemente nur, wenn Bedingung true ist.

Beispiel:

<script setup>
import { ref } from 'vue'

const score = ref(85)
const isLoggedIn = ref(false)
</script>

<template>
  <!-- Einfache if-Abfrage -->
  <p v-if="score >= 90">Note: Sehr gut</p>
  <p v-else-if="score >= 75">Note: Gut</p>
  <p v-else-if="score >= 60">Note: Befriedigend</p>
  <p v-else>Note: Nicht bestanden</p>
  
  <!-- if mit Boolean -->
  <div v-if="isLoggedIn">
    <p>Willkommen zurück!</p>
    <button @click="isLoggedIn = false">Abmelden</button>
  </div>
  <div v-else>
    <p>Bitte anmelden</p>
    <button @click="isLoggedIn = true">Anmelden</button>
  </div>
</template>

Wichtig:

• ✅ v-else und v-else-if müssen direkt nach v-if kommen
• ✅ Elemente werden komplett entfernt (nicht nur versteckt)

---

9.2 v-show - Anzeigen/Verstecken

v-show schaltet CSS display Eigenschaft.

Beispiel:

<script setup>
import { ref } from 'vue'

const isVisible = ref(true)
</script>

<template>
  <!-- Mit v-show -->
  <p v-show="isVisible">Ich bin sichtbar</p>
  
  <!-- Toggle Button -->
  <button @click="isVisible = !isVisible">
    {{ isVisible ? 'Verstecken' : 'Anzeigen' }}
  </button>
</template>

v-if vs v-show:

Merkmal	v-if	v-show
Rendering	Entfernt DOM	CSS display: none
Performance (häufig wechselnd)	Schlechter	Besser
Initial-Rendering	Lazy	Immer
Verwendung	Selten wechselnd	Häufig wechselnd

Empfehlung:

• Selten wechselnd → v-if
• Häufig wechselnd → v-show

---

9.3 <template> mit v-if

<template> Tag wird nicht gerendert, nützlich für mehrere Elemente.

Beispiel:

<script setup>
import { ref } from 'vue'

const isLoggedIn = ref(false)
</script>

<template>
  <!-- Ohne template (mehrere v-if) -->
  <h1 v-if="isLoggedIn">Willkommen!</h1>
  <p v-if="isLoggedIn">Hier sind deine Daten...</p>
  <button v-if="isLoggedIn">Abmelden</button>
  
  <!-- Mit template (sauberer) -->
  <template v-if="isLoggedIn">
    <h1>Willkommen!</h1>
    <p>Hier sind deine Daten...</p>
    <button>Abmelden</button>
  </template>
  
  <template v-else>
    <h1>Bitte anmelden</h1>
    <button>Anmelden</button>
  </template>
</template>

Vorteil: <template> wird nicht als DOM-Element gerendert!

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ v-if / v-else / v-else-if - Bedingte Rendering
• ✅ v-show - Anzeigen/Verstecken
• ✅ Unterschied zwischen v-if und v-show
• ✅ <template> Tag für mehrere Elemente

🎯 Nächster Schritt: In Kapitel 10 lernst du v-for (Listen-Rendering)!

---

← Zurück zu Kapitel 8: Directive (Teil 1)Weiter zu Kapitel 10: v-for (Listen) →