v-show

Na ukazování a skrývání je ještě druhá direktiva: v-show. Píše se stejně jako v-if:

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

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

<template>
    <button @click="ukazHodiny = !ukazHodiny">Otevírací doba</button>
    <p v-show="ukazHodiny">Každý den od 7:00 do 19:00.</p>
</template>

Funguje ale jinak. Prvek je na stránce pořád a v-show ho jen skryje, pomocí CSS display: none. Před prvním kliknutím je na stránce:

<button>Otevírací doba</button>
<p style="display: none;">Každý den od 7:00 do 19:00.</p>

Kliknutí změní jen styl odstavce. S v-if by odstavec na stránce vůbec nebyl, jen komentář, který označuje jeho místo, <!--v-if-->, a každé kliknutí by odstavec znovu vytvořilo nebo odstranilo.

Kterou direktivu tedy použít? Většinou v-if. v-show se hodí na něco, co se často ukazuje a skrývá, třeba menu, které se otevírá a zavírá: změnit styl je rychlejší než prvek znovu vytvořit. K v-show ale neexistuje v-else a skrytý prvek se vykreslí, i když se na něj nikdo nikdy nepodívá.