v-if a v-else

Z lekce Šablony víte, že if do {{ }} dát nejde. Abyste prvek ukázali, jen když platí nějaká podmínka, dejte mu direktivu v-if:

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

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

<template>
    <h1>Kavárna Na Rohu</h1>
    <p v-if="otevreno">Pojďte dál, máme otevřeno!</p>
    <p v-else>Bohužel, máme zavřeno.</p>
    <button @click="otevreno = !otevreno">Otočit cedulku</button>
</template>

Dokud otevreno platí, je na stránce první odstavec. Klikněte na tlačítko a Vue ho odstraní a na jeho místo dá druhý: v-else ukáže svůj prvek, když v-if před ním ten svůj neukáže. Mezi nimi může být libovolně mnoho v-else-if, každé s vlastní podmínkou:

<p v-if="hodina < 7">Otevíráme v 7:00.</p>
<p v-else-if="hodina < 19">Máme otevřeno do 19:00.</p>
<p v-else>Máme zavřeno. Uvidíme se zítra!</p>

Vue prochází podmínky odshora a ukáže jen první prvek, jehož podmínka platí, stejně jako if, else if a else v JavaScriptu. V 9 hodin je to ten druhý. Když neplatí žádná podmínka a v-else chybí, neukáže žádný.

Prvek, jehož v-if neplatí, není skrytý: na stránce vůbec není. Vue ho vytvoří, když podmínka začne platit, a odstraní ho, když platit přestane.

Typická chyba: prvek mezi nimi. v-else-if a v-else musí být na prvku hned za v-if nebo v-else-if. S jiným prvkem mezi nimi se stránka nespustí a červený pruh pod náhledem ukáže řádek s v-else a hlášku v-else/v-else-if has no adjacent v-if or v-else-if.