Renderowanie warunkowe ​

v-if ​

Dyrektywa v-if jest używana do warunkowego renderowania bloku. Blok będzie renderowany tylko wtedy, gdy wyrażenie dyrektywy zwróci wartość prawdziwą.

<h1 v-if="awesome">Vue jest niesamowite!</h1>

v-else ​

Można użyć dyrektywy v-else, aby wskazać blok "else" dla v-if:

<button @click="awesome = !awesome">Przełącz</button>

<h1 v-if="awesome">Vue jest niesamowite!</h1>
<h1 v-else>O nie 😢</h1>

Element v-else musi natychmiast po v-if lub v-else-if - w przeciwnym razie nie zostanie rozpoznany.

v-else-if ​

v-else-if, jak sama nazwa wskazuje, pełni rolę bloku "else if" dla v-if. Może być również dołączne wielokrotnie:

<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>

Podobnie jak v-else, element v-else-if musi pojawić się natychmiast po v-if lub v-else-if.

v-if w <template> ​

Ponieważ v-if jest dyrektywą, musi być przypisane do pojedynczego elementu. Ale co w przypadku kiedy chcemy przełączać więcej niż jeden element? W takim przypadku możemy użyć v-if na elemencie <template>, który służy jako niewidoczny kontener. Końcowy wynik renderowania nie będzie zawierał elementu <template>.

<template v-if="ok">
  <h1>Tytuł</h1>
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</template>

v-else i v-else-if mogą być również używane w <template>.

v-show ​

Inną opcją warunkowego wyświetlania elementu jest dyrektywa v-show. Użycie jest zasadniczo takie samo:

<h1 v-show="ok">Cześć!</h1>

Różnica polega na tym, że element z v-show będzie zawsze renderowany i pozostanie w DOM; v-show tylko przełącza właściwość CSS display elementu.

v-show nie obsługuje elementu <template>, ani nie działa z v-else.

v-if vs. v-show ​

v-if to "prawdziwe" renderowanie warunkowe, ponieważ zapewnia, że nasłuchiwacze zdarzeń i komponenty potomne w bloku warunkowym są odpowiednio niszczone i ponownie tworzone podczas przełączania.

v-if jest również lazy: jeśli warunek jest fałszywy podczas początkowego renderowania, nie zrobi nic - blok warunkowy nie zostanie wyrenderowany, dopóki warunek nie stanie się prawdziwy po raz pierwszy.

W porównaniu, v-show jest o wiele prostsze - element jest zawsze renderowany, niezależnie od początkowego warunku, z przełączaniem oparte na CSS.

Ogólnie rzecz biorąc, v-if ma wyższe koszty przełączania, podczas gdy v-show ma wyższe koszty początkowego renderowania. Wybieraj zatem v-show, jeśli musisz przełączać coś bardzo często, a v-if, jeśli mało prawdopodobne jest, aby warunek zmienił się w czasie wykonywania.

v-if z v-for ​

Kiedy v-if i v-for są używane w tym samym elemencie, v-if zostanie wzięte pod uwagę pierwsze. Zobacz przewodnik renderowania list, żeby poznać szczegóły.