Vue 3 Tutorial – bedingtes Rendering mit v-if und v-show

Ein Shop muss sagen, ob das Produkt verfügbar ist. Vue bietet zwei Werkzeuge, um ein Element abhängig von einer Bedingung anzuzeigen oder auszublenden: v-if und v-show. Sie sehen ähnlich aus, tun aber nicht dasselbe.

Die Bedingung vorbereiten

Ergänze den Zustand der Komponente um einen Lagerbestand:

<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 setzt ein Element nur dann in die Seite, wenn der Ausdruck wahr ist.

<p v-if="inventory > 10">En stock</p>

Für mehrere Fälle verkettest du mit v-else-if und 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>

Von diesen drei Absätzen existiert immer nur einer. Setze inventory auf 5, dann auf 0, und sieh zu, wie sich die Meldung ändert.

Mehrere Elemente auf einmal an eine Bedingung hängen

Um eine Bedingung auf eine Gruppe anzuwenden, ohne ein überflüssiges div einzuziehen, setzt du das v-if auf <template>. Dieses Tag erzeugt im fertigen HTML nichts.

<template v-if="inventory > 0">
  <h2>Disponible</h2>
  <p>Expédié sous 48 heures.</p>
</template>

v-show

v-show deckt denselben Bedarf ab, mit einer anderen Mechanik:

<p v-show="inventory > 0">Livraison sous 48 h</p>

Das Element ist immer im DOM vorhanden. Ist die Bedingung falsch, hängt Vue ihm einfach display: none an. Öffne den Inspektor und sieh selbst nach:

<!-- 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>

Welches von beiden

Der Unterschied liegt in den Kosten der Operation.

• v-if erzeugt und zerstört das Element, und mit ihm seine Kindkomponenten samt deren Zustand. Hohe Kosten beim Umschalten, gar keine, solange die Bedingung falsch ist.
• v-show ändert nur eine CSS-Eigenschaft. Hohe Kosten beim ersten Rendern, weil das Element in jedem Fall gebaut wird, nahezu keine bei allen weiteren Umschaltvorgängen.

In der Praxis: v-show für alles, was häufig auf- und zugeht, etwa ein Menü oder ein ausklappbares Panel. v-if für den ganzen Rest, besonders für alles, was teuer zu bauen ist oder in bestimmten Fällen gar nicht existieren darf.

v-if und v-for am selben Element

Kombiniere die beiden nicht am selben Tag. Die Schleife v-for ist Thema des nächsten Kapitels. Seit Vue 3 hat v-if Vorrang und wird vor der Schleife ausgewertet: Die Schleifenvariable existiert noch nicht, was einen Fehler auslöst. Setze das v-if auf ein inneres <template> oder filtere die Liste in einer Computed Property. Beides sehen wir in Kapitel 7.