Vue.js 3.x – 05 – Renderização condicional

ATENÇÃO! Para acessar o post anterior a este, em que abordo o conceito de binding em classes CSS, clique aqui!

No post anterior lidamos com o binding de classes CSS, e vimos que isso dá um poder absurdo ao desenvolvedor front-end, no sentido de oferecer muitas possibilidades de desenvolvimento de interfaces dinâmicas. Neste post, vamos falar sobre renderização conficional, iterações e diretivas.

ATENÇÃO! Antes de iniciar os exemplos, é recomendável criar um novo projeto. Se não se lembra como faz isso, clique aqui.

Depois de criar o projeto, exclua o arquivo src/components/Hello.vue e deixe o código do arquivo src/App.vue “limpo”, como mostra o exemplo a seguir.

<template>
  <!-- código HTML aqui   -->
  <div>

  </div>
</template>

<script>
//..lógica da aplicação aqui
export default {
  //..nome do componente
  name: 'App',
  //..função para retornar dados
  data () {
    return {
      
    }
  }
}
</script>
<style>
/* Estilos CSS aqui */

</style>

Renderização condicional

O Vue.js oferece a diretiva v-if para lidar com renderização condicional, que é um cenário bem típico no desenvolvimento front-end.

Um simples exemplo seria fazer a declaração de uma data property e, mediante a diretiva v-if, renderizar um ou mais elementos HTML analisando o valor dessa data property. O código comentado a seguir mostra exatamente isso. Veja:

<template>  
  <div>
    <!-- diretiva v-if -->
    <h1 v-if="number === 0 ">O Número é zero!</h1>
    <h1 v-else>O número não é zero!</h1>
  </div>
</template>

<script>
export default {
  //..nome do componente
  name: 'App',  
  data () {
    return {
      //..data property
      number : 5,  
    }
  }
}
</script>

Para que serviria uma estrura if-else se não pudéssemos adicionar mais de uma condição, não é mesmo? Veja o exemplo a seguir, com duas condições e um else.

<template>  
  <div>
    <!-- diretivas v-if, v-else-if e v-else -->
    <h1 v-if="number === 0 ">O Número é zero!</h1>
    <h1 v-else-if="number > 0">O número {{ number }} é positivo!</h1>
    <h1 v-else>O número {{ number }} é negativo!</h1>
  </div>
</template>

A tag <template>

A tag template (não o bloco template, que é obrigatório) cria uma “div invisível”, com o objetivo deagrupar elementos a fim de renderizá-los. Isso é útil, considerando que não é necessário criar divs para agrupar elementos, o que pode prejudicar a estrutura do seu layout, principalmente se você estiver usando um front-endframework e precisa obedecer certas estruturas hierárquicas de marcação.

Veja o seguinte código, renderizado no browser e seu código inspecionado para verificar que a tag template agrupou virtualmente os elementos, ou seja, ela não aparece no código-fonte.

<template>
  <div>
    <h1>Estando Vue.js!</h1>
    <!-- verifica o valor da data property display -->
    <template v-if="display"> 
      <h1 v-if="number === 0">O Número é zero!</h1>
      <h1 v-else-if="number > 0">O número {{ number }} é positivo!</h1>
      <h1 v-else>O número {{ number }} é negativo!</h1>
    </template>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      number: -1,
      //..data property para controlar a exibição do template
      display: true,
    };
  },
};
</script>

A diretiva v-show

A diretiva v-show é uma outra forma de exibir ou não um ou um conjunto de elementos. Na diretiva v-if, quando a condição é falsa, o elemento não é renderizado. Por sua vez, na diretiva v-show, o elemento sempre será renderizado, porém, quando a condição for falsa, será atribuído um estilo inline que usa a declaração display:none, ocultando o elemento.

O valor da diretiva v-show deve ser uma expressão JS que retorna true ou false. Veja o seguinte código:

  <h1 v-show="true">Aprendendo Vue JS</h1>

No exemplo acima, foi atribuído um valor estático. No exemplo a seguir, atribuiu-se o valor de uma data property do objeto data:

<h1 v-show="display">Aprendendo Vue JS</h1>

Usando o exemplo anterior, inspecione os elementos no browser e veja a diferença entre as diretivas v-if e v-show.

Considerações finais

As diretivas v-if, incluindo suas irmãs, v-else-if e v-else, além da diretiva v-show, dão um poder absurdo ao desenvolvedor front-end, considerando as interfaces flexíveis que podem ser desenvolvidas.

Para saber mais, consulte a documentação oficial: https://vuejs.org/v2/guide/conditional.html

No próximo post, vamos falar sobre iterações. Até breve!