Interpretação Condicional ​

v-if ​

A diretiva v-if é usada para interpretar um bloco condicionalmente. O bloco apenas será interpretado se a expressão da diretiva retornar um valor verdadeiro:

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

v-else ​

Nós podemos usar a diretiva v-else para indicar um "bloco else" à v-if:

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

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

Um elemento v-else deve seguir imediatamente um elemento v-if ou v-else-if - de outro modo não será reconhecido.

v-else-if ​

A diretiva v-else-if, como o nome sugere, serve como um "bloco else if" à v-if. Esta também pode ser encadeada várias vezes:

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

Semelhante à v-else, um elemento v-else-if deve seguir imediatamente um elemento v-if ou um v-else-if.

v-if no <template> ​

Uma vez que a v-if é uma diretiva, esta precisa ser atribuída a um único elemento. Porém, e se quiséssemos alternar mais que um elemento? Neste caso podemos usar a v-if sobre um elemento <template>, que serve como um embrulhador invisível. O resultado final interpretado não incluirá o elemento <template>:

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

A v-else e a v-else-if também podem ser usadas sobre o <template>.

v-show ​

Uma outra opção para exibir condicionalmente um elemento é a diretiva v-show. O uso é maioritariamente o mesmo:

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

A diferença é que um elemento com a v-show sempre será interpretado e permanecerá no DOM; A v-show apenas alterna a propriedade de CSS display do elemento.

A v-show não suporta o elemento <template>, nem funciona com a v-else.

v-if vs v-show ​

A v-if é a interpretação condicional "verdadeira" porque esta garante que os ouvintes de evento e componentes filhos dentro do bloco condicional sejam destruídos corretamente e recriados durante as alternâncias.

A v-if também é preguiçosa: se a condição for falsa na interpretação inicial, esta não fará nada - o bloco condicional não será interpretado até a condição tornar-se verdadeira pela primeira vez.

Em comparação, a v-show é muito mais simples - o elemento é sempre interpretado independentemente da condição inicial, com alternância baseada em CSS.

Dum modo geral, a v-if tem custos de alternância mais elevados enquanto a v-show tem custos de interpretação inicial mais elevados. Então devemos preferir a v-show se precisarmos de alternar algo com muita frequência, e devemos preferir v-if se for pouco provável que a condição se altere em execução.

v-if com v-for ​

Quando a v-if e a v-for forem ambas usadas sobre o mesmo elemento, a v-if será avaliada primeiro. Consultar o guia de interpretação de lista por detalhes.