Introdução
A renderização condicional é utilizada para exibir ou esconder algum código de acordo com uma condição, e o VueJS só mostrará um determinado elemento na tela caso atenda a alguma condição.
Há situações onde é preciso mostrar algo, somente dependendo de alguma condição específica, por exemplo, no sistema há dois níveis de usuário, administrador e colaborador, no caso, somente o administrador pode ter acesso aos relatórios, então não é conveniente deixar no menu a opção de relatórios quando um colaborador está logado, é possível resolver isso com renderização condicional.
Esse é apenas um exemplo, mas sempre que precisar esconder ou mostrar algo na tela, pode ser feito utilizando a renderização condicional, que sempre será utilizada no HTML da página.
v-if
O v-if é uma diretiva do VueJS que é utilizada para mostrar um bloco HTML somente se a condição retornar true.
Essa condição poder ser um valor computado, ou um valor que esteja diretamente em uma variável no retorno do data e como citado anteriormente, o retorno do computado ou o valor da variável precisa ser true.
Veja um exemplo de como utilizar o v-if para mostrar um título H1:
<h1 v-if="condicao">Renderização Condicional!</h1>
data() {
return {
//se trocar pra false, o título não é mostrado
condicao: true;
}
}
O v-if pode ser adicionado em qualquer tag HTML ou na tag <template> que é uma tag especial do VueJS e é ótima para usar com o v-if, porque não precisa mudar em nada a estrutura de tags e ainda sim da o resultado esperado.
Outro ponto importante para utilizar o template é que o v-if pode ser colocado em somente um elemento HTML, mas com o template é possível colocar todos os elementos que deseja mostrar condicionalmente dentro dele.
Veja um exemplo utilizando a tag template:
Veja que neste segundo caso, se o valor da variável condicao for false, todo o bloco não é mais renderizado na tela.
Como comentei anteriormente, também pode ser utilizado o v-if utilizando um computado, e é comum fazer isso, caso precise utilizar algum calculo para exibir ou não um bloco. Também é possível utilizar um método, o jeito de utilizar é o mesmo.
Exemplo utilizando o computed:
<template v-if="condicao2">
<h1>Rendericacao Condicional!</h1>
<p>Olá mundo</p>
<div>Tudo bem com vocês?</div>
</template>
data() {
return {
valor: 20
};
},
computed: {
condicao2(){
return this.valor > 10
}
}
Exemplo utilizado o method:
<template v-if="condicao2()">
<h1>Rendericacao Condicional!</h1>
<p>Olá mundo</p>
<div>Tudo bem com vocês?</div>
</template>
data() {
return {
valor: 20
};
},
method: {
condicao2(){
return this.valor > 10
}
}
Repare que o uso dos dois é similar, o que muda é só que o method precisa executar uma função, se não o retorno dele será uma function, e na hora da renderização o v-if irá avaliar como true e você pode passar horas debugando até perceber que precisa invocar como função caso seja um method, já o computado é utilizado sem abrir e fechar parenteses.
v-else
Há situações onde a condição do v-if não será satisfeita, e no caso, nada será mostrado, e em vez de deixar a tela em branco parecendo que houve algum erro, é ideal que se coloque uma mensagem uma imagem de erro mostrando que não há dados para serem exibidos por exemplo.
O v-else pode ser utilizado para esse comportamento, é utilizado em qualquer situação onde se deseja mostrar algo caso a condição do v-if seja false.
Para usar o v-else, é necessário utilizar o v-if antes, e eles precisam estar no mesmo nível nos elementos HTML, não é possível utilizar o v-else em um elemento filho do v-if. Veja o exemplo:
<template v-if="valores">
Mostrando os dados
</template>
<template v-else>
Não há dados para serem exibidos
</template>
data() {
return {
valor: 0
};
},
computed: {
valores(){
return this.valor > 0
}
}
Como no caso, a variável valor, está definida como 0, e a frase “Mostrando os dados” só será exibida se a variável valor for maior do que 0, então o resultado será:
v-show
O v-show tem um funcionamento igual ao do v-if, porém tem uma diferença sutil e muito importante entre eles.
Com o v-if, quando o navegador estiver interpretando o código para renderizar na tela, os elementos dentro do v-if não são adicionados ao DOM.
Já com o v-show, o que estiver dentro dele é adicionado ao DOM, porém fica escondido.
Isso é importante porque, o VueJS utiliza referências a elementos, como por exemplo para chamar modais ou emitir outros eventos, caso você chame ou utilize a referência de um elemento, se ele não estiver no DOM, essa referência não será encontrada e retornará um erro, já utilizando o v-show, mesmo que não esteja na tela a referência será encontrada e dará o resultado esperado.
Exemplo do v-show:
<p ref="paragrafo1" v-show="condicao">Mostrando os dados</p>
data() {
return {
condicao: false,
};
},
created() {
console.log(this.$refs);
},
No caso acima, o created irá chamar um console.log para mostrar todas as referências da página, e com o v-show, o resultado do console será esse:
Com isso, mostra que o elemento parágrafo1, pode ser acessado mesmo que ele não esteja sendo mostrado na tela no momento.
Utilizando o mesmo código, porém trocando o v-show pelo v-if, o resultado será esse:
Ou seja, não será possível fazer nenhuma tratativa ou acessar a referência do paragrafo1, caso tente fazer isso o resultado será undefined.
Código fonte
Caso você queira dar uma olhada nos códigos, e tentar implementar os exemplos, utilize este CodeSandbox
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Vídeo sobre o assunto
Conclusão
Saber utilizar a renderização condicional é fundamental no VueJS, pois da pra utilizar em diversas situações e provavelmente você precisará utilizar em uma delas, até o próximo post 🙂
Referências
https://br.vuejs.org/v2/guide/conditional.html
https://vuejs-brasil.com.br/diretivas-no-vue-js-1-2/#:~:text=Diretivas%20basicamente%20s%C3%A3o%20extens%C3%B5es%20da,escrever%20muito%20javascript%20por%20exemplo.
https://www.maujor.com/tutorial/heranca-css.php