Wat is conditional rendering?

Soms wil je iets alleen tonen onder bepaalde voorwaarden:

  • Een "Laden..." tekst alleen tijdens het laden
  • Een error-melding alleen als er een fout is
  • Een "Uitloggen"-knop alleen als de gebruiker is ingelogd
  • Een modal alleen als hij openstaat

Vue heeft hier twee directives voor: v-if en v-show. Voor 90% van de gevallen gebruik je v-if.

v-if & v-else

Met v-if render je een element alleen als de conditie waar is. Als de conditie false is, staat het element niet in de DOM.

Basis

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

const loggedIn = ref(true)
</script>

<template>
  <p v-if="loggedIn">Welkom terug!</p>
</template>

Met v-else

<template>
  <p v-if="loggedIn">Welkom terug!</p>
  <p v-else>Log in om door te gaan.</p>
</template>

Praktisch voorbeeld — loading state:

<p v-if="loading">Laden...</p>
<ul v-else>
  <li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>

Let op: v-else moet direct na de v-if komen. Er mag geen ander element tussen staan.

Meerdere condities: v-else-if

Heb je meer dan twee opties? Gebruik v-else-if.

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

const status = ref('loading') // 'loading' | 'success' | 'error'
</script>

<template>
  <p v-if="status === 'loading'">Laden...</p>
  <p v-else-if="status === 'error'">Er ging iets fout</p>
  <p v-else>Klaar! ✅</p>
</template>

Vue toont één van de drie elementen — de eerste die true is.

v-show — een alternatief

v-show doet bijna hetzelfde als v-if, met één belangrijk verschil: het element blijft in de DOM staan, maar krijgt display: none als de conditie false is.

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

const isVisible = ref(true)
</script>

<template>
  <p v-show="isVisible">Ik ben zichtbaar (of niet)</p>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>

Wat gebeurt er onder water?

  • v-if="false" → element wordt verwijderd uit de DOM
  • v-show="false" → element blijft, krijgt alleen style="display: none"

Let op: v-show werkt niet met v-else. Gebruik je een if/else? → kies v-if.

v-if of v-show?

De korte regel:

Gebruik bijna altijd v-if.

Gebruik v-show alleen als je iets heel vaak toggelt (bijv. een tabblad, een tooltip).

v-if v-show
DOM Verwijderd / toegevoegd Altijd aanwezig
Met v-else? Ja Nee
Beste voor Wisselende UI states (loading/error/success) Iets dat veel aan/uit gaat

In de praktijk gebruik je bijna altijd v-if. Twijfel? → v-if.

Belangrijke Regels

  • Default keuze: v-if
  • v-else moet direct na v-if komen (geen ander element ertussen)
  • v-show ondersteunt geen v-else
  • De conditie mag een expressie zijn: v-if="age >= 18", v-if="user && user.admin"

Veelgemaakte Fouten

Fout — element tussen v-if en v-else:

<p v-if="loggedIn">Welkom!</p>
<hr />                              <!-- ❌ breekt de else -->
<p v-else>Log in</p>

Goed:

<p v-if="loggedIn">Welkom!</p>
<p v-else>Log in</p>
<hr />                              <!-- ✅ erna -->

Fout — v-show met v-else:

<p v-show="loggedIn">Welkom!</p>
<p v-else>Log in</p>                <!-- ❌ v-else werkt alleen bij v-if -->

Goed — twee aparte v-shows of gebruik v-if:

<p v-if="loggedIn">Welkom!</p>
<p v-else>Log in</p>                <!-- ✅ -->