Vue.js

1 - Introdução 2 - Conhecendo o framework Vue.js 3.8.0 3 - Criando projeto Vue.js 4 - Interpolação de texto 5 - Trabalhando com componentes 6 - Diretiva v-if 7 - Diretiva v-else-if e v-else 8 - Diretiva v-for 9 - Diretiva v-html 10 - Diretiva v-model 11 - Interligações de classes 12 - Evento de clique 13 - Eventos de teclado 14 - Evento de submissão 15 - PreventDefault 16 - Lifecycle 17 - Props estáticos 18 - Props dinâmicos 19 - Rotas 20 - Requisições HTTP 21 - Considerações

6 - Diretiva v-if

Olá pessoal, na sexta aula do treinamento de Vue.js, iremos trabalhar com a diretiva de condicional v-if.

Antes de trabalharmos com o v-if, vamos entender o que é uma diretiva. Diretivas são comandos vinculados a tags HTML para realizarmos ações de maneira dinâmica, abaixo deixarei alguns exemplos:

  • Diretiva de condicional: Podemos ocultar e exibir elementos ou através de varáveis, retornar uma informação específica
  • Diretiva de laço: Cria uma estrutura de repetição para exibirmos dados através de listas e tabelas
  • Diretiva de estilos: Aplica uma estilização CSS, dependendo do valor contido em uma variável

Vamos colocar em ação o uso dessa diretiva, iniciamos criando um componente chamado: Exemplo02Condicional.vue, a estrutura do arquivo será essa:

Em seguida, no arquivo App.vue, iremos importar nosso componente e realizar a referência na estrutura HTML:

Abaixo deixo um vídeo mostrando cada etapa desta aula: