v-if und v-else

Wie du aus der Lektion Vorlagen-Syntax weißt, kann in {{ }} kein if stehen. Um ein Element nur zu zeigen, wenn eine Bedingung gilt, gibst du ihm die Direktive v-if:

<script setup>
import { ref } from "vue";

const geoeffnet = ref(true);
</script>

<template>
    <h1>Café am Eck</h1>
    <p v-if="geoeffnet">Komm herein, wir haben geöffnet!</p>
    <p v-else>Leider haben wir geschlossen.</p>
    <button @click="geoeffnet = !geoeffnet">Schild umdrehen</button>
</template>

Solange geoeffnet wahr ist, hat die Seite den ersten Absatz. Klicke auf den Button, und Vue entfernt ihn und setzt den zweiten an seine Stelle: v-else zeigt sein Element, wenn das v-if davor es nicht tut. Dazwischen können beliebig viele v-else-if stehen, jedes mit eigener Bedingung:

<p v-if="stunde < 7">Wir öffnen um 7 Uhr.</p>
<p v-else-if="stunde < 19">Wir haben bis 19 Uhr geöffnet.</p>
<p v-else>Wir haben geschlossen. Bis morgen!</p>

Vue prüft die Bedingungen von oben nach unten und zeigt nur das erste Element, dessen Bedingung wahr ist, genau wie if, else if und else in JavaScript funktionieren. Um 9 Uhr ist das das zweite. Ist keine Bedingung wahr und gibt es kein v-else, zeigt es keins davon.

Ein Element, dessen v-if falsch ist, ist nicht versteckt: Es ist überhaupt nicht auf der Seite. Vue erzeugt das Element, wenn die Bedingung wahr wird, und entfernt es, wenn sie falsch wird.

Typischer Fehler: ein Element dazwischen. v-else-if und v-else müssen an dem Element stehen, das direkt auf ein v-if oder v-else-if folgt. Steht ein anderes Element dazwischen, läuft die Seite nicht, und die rote Leiste unter der Vorschau nennt die Zeile des v-else und sagt v-else/v-else-if has no adjacent v-if or v-else-if.