Renderowanie warunkowe (Conditional Rendering) #

v-if #

Dyrektywa v-if jest używana do warunkowego renderowania bloku. Blok zostanie wyrenderowany tylko wtedy, gdy wyrażenie dyrektywy zwróci wartość true.

<h1 v-if="awesome">Vue jest wspaniałe!</h1>

v-else #

Dyrektywy v-else można użyć do wskazania "bloku else" dla v-if:

<button @click="awesome = !awesome">Toggle</button>

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

Element v-else musi występować bezpośrednio po elemencie v-if lub v-else-if - w przeciwnym razie nie zostanie rozpoznany.

v-else-if #

v-else-if, jak sama nazwa wskazuje, służy jako "blok else if " dla v-if. Można go również łączyć łańcuchowo wiele razy:

<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 do v-else, element v-else-if musi następować bezpośrednio po elemencie v-if lub v-else-if.

v-if w <template> #

Ponieważ v-if jest dyrektywą, musi być dołączona do pojedynczego elementu. Ale co zrobić, jeśli 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 niewidzialna osłona. Końcowy wynik renderowania nie będzie zawierał elementu <template>.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else i v-else-if mogą być także użyte na <template>.

v-show #

Inną możliwością warunkowego wyświetlenia elementu jest dyrektywa v-show. Sposób użycia jest w dużej mierze taki sam:

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

Różnica polega na tym, że element z v-show zawsze będzie 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 współpracuje z v-else.

v-if vs v-show #

v-if jest "prawdziwym" renderowaniem warunkowym, ponieważ gwarantuje, że event listeners i komponenty potomne wewnątrz bloku warunkowego są poprawnie usuwane i ponownie tworzone podczas przełączania.

v-if jest również lazy: jeśli warunek jest fałszywy przy pierwszym renderowaniu, to nie zrobi nic - blok warunkowy nie zostanie wyrenderowany, dopóki warunek nie stanie się prawdziwy po raz pierwszy.

Dla porównania, v-show jest znacznie prostsze - element jest zawsze renderowany niezależnie od stanu początkowego, z przełączaniem opartym na CSS.

Ogólnie rzecz biorąc, v-if ma wyższe nakłady podczas przełączeń, podczas gdy v-show ma wyższe początkowe nakłady renderowania. Tak więc wybierz v-show jeśli musisz przełączać coś bardzo często, natomiast wybierz v-if jeśli stan rzadko się zmienia w czasie działania.

v-if z v-for #

Gdy v-if i v-for są użyte na tym samym elemencie, v-if zostanie obliczone jako pierwsze. Zobacz. przewodnik - renderowanie list by dowiedzić się szczegółów.