Vue.js

# Renderização Condicional

Aprenda como a renderização condicional funciona com uma aula gratuita na Vue School

# v-if

A diretiva v-if é usada para renderizar condicionalmente um bloco. O bloco só será renderizado se a expressão na diretiva retornar um valor verdadeiro.

<h1 v-if="awesome">Vue é incrível!</h1>
1

Também é possível adicionar um "bloco else" usando v-else:

<h1 v-if="awesome">Vue é incrível!</h1>
<h1 v-else>Oh não 😢</h1>
1
2

# Grupos Condicionais com v-if em <template>

Como v-if é uma diretiva, então deve ser anexado à um único elemento. E se quisermos alternar mais de um elemento? Nesse caso podemos usar v-if em um elemento <template>, que serve como um wrapper invisível. O resultado final renderizado não incluirá o elemento <template>.

<template v-if="ok">
  <h1>Título</h1>
  <p>Parágrafo 1</p>
  <p>Parágrafo 2</p>
</template>
1
2
3
4
5

# v-else

É possível utilizar a diretiva v-else para indicar um "bloco else" para v-if:

<div v-if="Math.random() > 0.5">
  Agora você me vê
</div>
<div v-else>
  Agora você não me vê
</div>
1
2
3
4
5
6

Um elemento v-else deve vir imediatamente após um elemento v-if ou v-else-if, caso contrário não será reconhecido.

# v-else-if

O v-else-if, como o nome sugere, serve como um "bloco else if" ao v-if. Ele pode, inclusive, ser encadeado 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>
  Não A, B ou C
</div>
1
2
3
4
5
6
7
8
9
10
11
12

Similar ao v-else, um v-else-if deve vir imediatamente após um elemento v-if ou um elemento v-else-if.

# v-show

Outra opção para exibir condicionalmente um elemento é a diretiva v-show. A utilização é basicamente a mesma:

<h1 v-show="ok">Olá!</h1>
1

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

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

# v-if vs v-show

v-if é a renderização condicional "real", pois garante que eventos e componentes filhos dentro do bloco condicional sejam devidamente destruídos e recriados durante a alternância.

v-if também é preguiçoso: se a condição for false na renderização inicial, nada será feito - o bloco condicional não será renderizado até que a condição se torne true pela primeira vez.

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

De modo geral, v-if tem custo maior nas alternâncias de renderização, enquanto que v-show tem custo maior na renderização inicial. Então prefira v-show se precisar alternar a visibilidade de algo com muita frequência, e prefira v-if se a condição não for se alterar muito durante runtime.

# v-if com v-for

Nota

Usar v-if e v-for juntos não é recomendado. Veja o guia de estilos para mais informações.

Quando v-if e v-for são usados juntos no mesmo elemento, v-if será avaliado primeiro. Veja sobre Renderização de Listas para mais detalhes.

← Renderização de Listas →