v-show

Es gibt eine zweite Direktive zum Zeigen und Verstecken: v-show. Sie wird genauso geschrieben wie v-if:

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

const zeigeZeiten = ref(false);
</script>

<template>
    <button @click="zeigeZeiten = !zeigeZeiten">Öffnungszeiten</button>
    <p v-show="zeigeZeiten">Täglich von 7 bis 19 Uhr.</p>
</template>

Sie funktioniert aber anders. Das Element ist immer auf der Seite, und v-show versteckt es nur, mit dem CSS display: none. Vor dem ersten Klick hat die Seite:

<button>Öffnungszeiten</button>
<p style="display: none;">Täglich von 7 bis 19 Uhr.</p>

Ein Klick ändert nur den Stil des Absatzes. Mit v-if wäre der Absatz überhaupt nicht auf der Seite, nur ein Kommentar, der seinen Platz markiert, <!--v-if-->, und jeder Klick würde den Absatz neu erzeugen oder entfernen.

Welche solltest du verwenden? Meistens v-if. v-show ist für etwas, das oft gezeigt und versteckt wird, zum Beispiel ein Menü, das sich öffnet und schließt: Einen Stil zu ändern geht schneller, als das Element neu zu erzeugen. Aber für v-show gibt es kein v-else, und ein verstecktes Element wird trotzdem gerendert, auch wenn es nie jemand ansieht.