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.