4. Renderização condicional (Introdução ao Vue.js)

Nesse tópico, vamos explorar maneiras de renderizar condicionalmente algum elemento.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Se você ficou com dúvidas sobre como resolver o desafio do 3. Dados computados. Segue o código do desafio resolvido no Github para você entender :)

Renderização condicional

Vamos explorar maneiras de renderizar condicionalmente algum elemento.

Objetivo

Vamos adicionar uma condição que vai definir se vamos ou não mostrar o título de nossa aplicação.

Problema

• Frequentemente em uma página web nós queremos que um elemento apareça na página dependendo de alguma condição específica.

Solução — (v-if)

A solução do Vue é muito simples, nós podemos usar uma diretiva chamada v-ifque determina se ele vai renderizar ou não o elemento.

Então abaixo do title: Meme Generator em nossa prop datavamos adicionar o variável showTitle com o valor true

E vamos colocar a diretiva v-if dentro do nosso h1 recebendo o valor de showTitle

Até agora não é para acontecer nada de diferente.

Mas e se alternamos o valor de showTitle para false?

what if?…

Alternando o valor de showTitle para false

woww

Explicando o resultado

mister M — vai revelar o segredo

mister M — revela o segredo da mágica

então…

kkkkkkkkkkkkk — se nd der certo posso fazer stand-up

Tá agora chega de piada de tio, e vamos voltar a estudar… No Vue também temos a diretiva v-else . Que serve para mostrar os dados que forem falsos dentro da diretiva v-if

v-if / v-else

Se o retorno do emptyTable() for verdadeiro vai mostrar a mensagem: Nenhum resultado encontrado!

Caso contrário vai mostrar uma tabela por exemplo.

Também temos o v-else-if para que no caso da primeira condição ser falsa, cair na segunda do v-else-if.

v-if / v-else-if / v-else

v-if / v-else-if / v-else

E temos também a diretiva v-show

v-show

• Se nosso aplicativo tem um elemento que frequentamente é mostrado ou não, é melhor utilizar a diretiva v-show;
• Na diretiva v-show o elemento sempre vai estar disponível no DOM, o que vai alterar é apenas sua visibilidade, sendo a propriedade display: none;
• Esse método é mais performático do que inserir ou remover um elemento do DOM várias e várias vezes com o v-if/v-else.

No nosso exemplo estamos usando o v-if.Se inspecionarmos o elemento vemos que o v-if remove o elemento h1.

Você pode testar alterando para o v-show para ver que ele muda apenas a visiblidade.

Outro exemplo — v-show

No exemplo abaixo temos o isLoading.Quando ele é verdadeiro carrega um componente de loading. Por exemplo, esse loading poderia ser usado para o usuário entender que os dados de uma atualização de requisição não foram carregados completamente.

v-show

4. Renderização condicional — (O que aprendemos)

• Diretivas do Vue para condicionalmente renderizar elementos v-if/v-else-if/v-else/v-show
• O elemento só é exibido se a condição dentro da diretiva for verdadeiro
• Você pode invocar métodos que contém expressões dentro das condições dessa diretiva
• v-show apenas muda a visibilidade do elemento, ele não insere ou remove um elemento do DOM

4º DESAFIO

• Adicionar uma propriedade chamada description no objeto data, com a descrição do app.
• Adicionar a tag <p> abaixo do <h1> mostrando a descrição do app.
• Adicionar uma propriedade chamada showDescription, que vai ter um valor booleano (true/false).
• Adicionar uma diretiva condicional do Vue, que se encaixa nessa situação para mostrar ou não, a descrição do app.

Vamos continuar nossa saga, e vamos aprender agora sobre Interligações de atributos. o//

Próximo post

5. Interligações de atributos (Introdução ao Vue.js)

Referências

Conditional Rendering - Vue.js