Vue 3-tutorial – conditionele rendering met v-if en v-show
geverifieerd op 2 september 2026 · 3 min
v-if maakt het element aan of vernietigt het, v-show laat het in de DOM staan en verbergt het met display: none. Gebruik v-show voor wat vaak open- en dichtgaat, v-if voor al de rest. Ketenen doe je met v-else-if en v-else.
Een webshop moet vertellen of een product op voorraad is. Vue heeft twee middelen om een element te tonen of te verbergen op basis van een conditie: v-if en v-show. Ze lijken op elkaar, maar ze doen niet hetzelfde.
De conditie voorbereiden
Voeg een voorraad toe aan de state van het component:
<script setup>
import { ref } from 'vue'
const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>v-if, v-else-if, v-else
v-if zet een element alleen in de pagina als de expressie waar is.
<p v-if="inventory > 10">En stock</p>Om meerdere gevallen af te dekken, keten je met v-else-if en v-else:
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 10">En stock</p>
<p v-else-if="inventory > 0">Bientôt en rupture</p>
<p v-else>En rupture</p>
</div>Er bestaat er altijd maar één van die drie paragrafen tegelijk. Zet inventory op 5, dan op 0, en kijk hoe de melding meeverandert.
v-else-if en v-else moeten meteen volgen op het element dat de v-if draagt. Staat er een commentaar of een ander element tussen, dan waarschuwt Vue in de console dat de v-else geen bijbehorende v-if heeft.
Meerdere elementen tegelijk conditioneel maken
Om een conditie op een groep toe te passen zonder een overbodige div toe te voegen, zet je de v-if op een <template>. Die tag levert niets op in de uiteindelijke HTML.
<template v-if="inventory > 0">
<h2>Disponible</h2>
<p>Expédié sous 48 heures.</p>
</template>v-show
v-show beantwoordt dezelfde behoefte, met een ander mechanisme:
<p v-show="inventory > 0">Livraison sous 48 h</p>Het element staat altijd in de DOM. Is de conditie onwaar, dan geeft Vue het gewoon display: none mee. Open de inspector om dat te controleren:
<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->
<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>Welke van de twee kies je
Het verschil zit in de kosten van de operatie.
v-ifmaakt het element aan en vernietigt het weer, en daarmee ook de childcomponenten en hun state. Duur bij het omschakelen, gratis zolang de conditie onwaar is.v-showverandert alleen een CSS-eigenschap. Duur bij de eerste render, want het element wordt hoe dan ook gebouwd, en daarna vrijwel gratis bij elk volgend omschakelen.
In de praktijk: v-show voor wat vaak open- en dichtgaat, zoals een menu of een uitklappaneel. v-if voor al de rest, en zeker voor wat duur is om te bouwen of in bepaalde gevallen helemaal niet mag bestaan.
Een element dat met v-show is verborgen, blijft in de HTML staan: iedereen leest het in de inspector. Voor wat niet zichtbaar mag zijn, gebruik je v-if, en stuur je het vooral helemaal niet naar de browser.
v-if en v-for op hetzelfde element
Combineer ze niet op dezelfde tag. De lus v-for is het onderwerp van het volgende hoofdstuk. Sinds Vue 3 heeft v-if voorrang en wordt hij vóór de lus geëvalueerd: de lusvariabele bestaat dan nog niet, wat een fout oplevert. Zet de v-if op een <template> daarbinnen, of filter de lijst in een computed property. Beide komen aan bod in hoofdstuk 7.
Identiek. v-if en v-show zijn templatedirectives, alleen de declaratie van inventory ziet er anders uit.
inventory onder de 5 zakt, zonder de andere meldingen te breken. Controleer daarna in de inspector dat een element dat met v-show is verborgen wel degelijk in de DOM staat.Veelgemaakte fouten
<template> of filter in een computed property.