3.2 KiB
title | localeTitle |
---|---|
Conditional | Condicionail |
v-if
Em templates estilo Handlebars, poderíamos escrever blocos condicionais como este:
<!-- Handlebars template -->
{{#if ok}}
<h1>Sim</h1>
{{/if}}
No Vue, usamos a diretiva v-if
para atingir o mesmo resultado:
<h1 v-if="ok">Sim</h1>
Também é possível adicionar um "bloco senão" usando v-else
:
<h1 v-if="ok">Sim</h1>
<h1 v-else>Não</h1>
Grupos Condicionais com <template>
Como v-if
é uma diretiva, deve ser anexado a um único elemento. E se quisermos alternar mais de um elemento? Podemos usar v-if
em um elemento <template>
, que serve como um invólucro invisível. O resultado final processado 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>
v-else
É possível utilizar a diretiva v-else
para indicar um "bloco else" para o v-if
:
<div v-if="Math.random() > 0.5">
Agora você me vê
</div>
<div v-else>
Agora você não me vê
</div>
Um elemento v-else
deve seguir imediatamente um elemento v-if
ou v-else-if
, caso contrário não será reconhecido.
v-else-if
Na versão 2.1.0+
O v-else-if
, como o nome sugere, serve como um "bloco else if" ao v-if
. 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>
Similar ao v-else
, um v-else-if
deve seguir imediatamente um elemento v-if
ou um elemento v-else-if
.
v-show
Outra opção para mostrar condicionalmente um elemento é a diretiva v-show
. A utilização é basicamente a mesma.
<h1 v-show="ok">Olá!</h1>
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.
Observe que `v-show` não oferece suporte à utilização em elementos `` e também não 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á processado 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 durante alternâncias de visibilidade, enquanto 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 tem tanta probabilidade de se modificar durante a execução.
v-if
com v-for
Quando utilizado em conjunto com v-for
, este possui maior prioridade do que o v-if
. Veja o guia de renderização de listas para mais detalhes.