Pular para o conteúdo

Programando Soluções

Renderização condicional (v-if v-else e v-show) VueJS

  • por
condicional

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;
    }
}
condicional

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:

condicional 2

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á:

condicional 3

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:

condicional 4

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:

condicional 5

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

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok