Podmíněné vykreslování ​

v-if ​

Direktiva v-if se používá k podmíněnému vykreslení bloku. Blok bude vykreslen pouze v případě, že výraz direktivy vrátí pravdivou hodnotu.

<h1 v-if="awesome">Vue je super!</h1>

v-else ​

Můžete použít direktivu v-else pro indikaci „else“ bloku k v-if:

<button @click="awesome = !awesome">Přepnout</button>

<h1 v-if="awesome">Vue je super!</h1>
<h1 v-else>Ale ne 😢</h1>

Element v-else musí vždy následovat bezprostředně za v-if nebo za v-else-if - jinak nebude rozpoznán.

v-else-if ​

Jak název v-else-if napovídá, slouží tato direktiva jako „else if“ blok k v-if. Může být zřetězena i několikrát za sebou:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

Stejně jako v-else, musí element v-else-if následovat bezprostředně po v-if nebo v-else-if.

v-if na <template> ​

Protože je v-if direktiva, musí být připojena k jedinému prvku. Ale co když chceme přepnout více než jeden prvek? V tom případě můžeme použít v-if na element <template>, který slouží jako neviditelný obal. Konečný vykreslený výsledek nebude prvek <template> obsahovat.

<template v-if="ok">
  <h1>Titulek</h1>
  <p>Odstavec 1</p>
  <p>Odstavec 2</p>
</template>

Na <template> lze použít i v-else a v-else-if.

v-show ​

Jiná možnost pro podmíněné zobrazení elementu je direktiva v-show. Použití je v zásadě to samé:

<h1 v-show="ok">Hello!</h1>

Rozdíl je v tom, že prvek s v-show bude vždy vykreslen a zůstane v DOM; v-show pouze přepíná vlastnost CSS elementu display.

v-show nelze použití na element <template> a také nefunguje dohromady s v-else.

v-if vs. v-show ​

v-if je „skutečné“ podmíněné vykreslování, protože zajišťuje, že event listenery a vnořené komponenty uvnitř podmíněného bloku budou správně zničeny a znovu vytvořeny během přepínání.

v-if je také „lazy“: pokud je podmínka při počátečním vykreslení nepravdivá, neudělá nic - podmíněný blok se nevykreslí, dokud se podmínka poprvé nestane pravdivou.

Ve srovnání s tím je v-show je mnohem jednodušší - prvek je vždy vykreslen bez ohledu na počáteční podmínku, s přepínáním založeným na CSS.

Obecně řečeno, v-if má vyšší náklady na přepínání, zatímco v-show má vyšší počáteční náklady na vykreslování. Takže upřednostněte v-show, pokud potřebujete něco přepínat velmi často, a použijte v-if, pokud je nepravděpodobné, že se podmínka za běhu změní.

v-if s v-for ​

Když jsou v-if a v-for použity na stejném prvku, bude nejprve vyhodnoceno v-if. Podrobnosti naleznete v průvodci vykreslováním seznamu.