Usar a renderização condicional

• 2 minutos

Quando trabalha com aplicativos controlados por dados, normalmente você precisa ser capaz de atualizar a exibição com base em determinados valores. Talvez seja necessário alterar a cor para indicar um aviso, desativar uma opção não disponível ou não exibir um controle. O Vue.js oferece várias diretivas para controlar se e como os itens são exibidos.

Alternar a visibilidade

Você pode controlar um item que está sendo exibido usando a diretiva v-show. v-show examina um valor ou expressão booliana e determina se um componente deve ser exibido. Como você poderia esperar, true significa que ele será exibido e false significa que não será.

O uso de v-show com uma expressão que é avaliada como true ou false é mostrado no seguinte exemplo:

<div v-show="new Date().getMonth() < 3">It is the first quarter</div>

Lógica booliana

O Vue.js dá suporte a três diretivas para implementar a lógica booliana: v-if, v-else-if e v-else. Como você poderia esperar, essas diretivas se alinham perfeitamente às instruções if, else if e else tradicionais.

<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>

Os exemplos anteriores funcionam porque as diretivas if se comportam da mesma forma que os blocos if em JavaScript. Quando um valor true é detectado, o bloco é encerrado. Sendo assim, se o mês retornado fosse 2, correspondendo a março (a contagem dos meses do calendário começa com 0), o resultado do teste seria true na primeira linha e as próximas três avaliações seriam ignoradas.