1 - Introdução 2 - Conceitos 3 - Criando e executar projetos 4 - Componente 5 - Interpolação de texto 6 - Event binding 7 - Property binding 8 - Diretiva ngIf 9 - Diretiva ngFor 10 - Diretiva ngSwitch 11 - Diretiva ngStyle 12 - Diretiva ngClass 13 - Control Flow 14 - Control Flow condicional 15 - Control Flow laço de repetição 16 - Control Flow estrutura de escolha 17 - Bootstrap 18 - FormsModule (parte 1) 19 - FormsModule (parte 2) 20 - Reactive Forms 21 - Apresentação do projeto 22 - Criar componente do projeto 23 - Strictnullchecks 24 - Criar formulário 25 - Criar tabela 26 - Implementar formulário reativo 27 - Validators 28 - Criar modelo de pessoa 29 - Mensagens de validação 30 - Propriedade disabled 31 - Visilidade de botões 32 - Criar vetor 33 - Função de cadastro 34 - Função de listagem 35 - Função de seleção 36 - Função de alteração 37 - Função de remoção 38 - Função para cancelar 39 - Considerações

7 - Property binding

Olá pessoal, na sétima aula do treinamento de Vue.js, iremos aprender sobre a técnica property binding.

Uma funcionalidade muito utilizada no Angular é o property binding, utilizando colchetes [], podemos tornar propriedades das tags HTML dinâmicas, veja alguns exemplos:

Exemplo 01: Imagine que você tenha a estrutura: < a [href]="variavel">Clique aqui< /a>, quando deixarmos a propriedade href entre colchetes, estamos dizendo que o valor entre aspas pode se basear pelo conteúdo de uma variável.

Exemplo 02: Podemos trabalhar com uma imagem também: < img [src]="variavel">, é possível alterar a imagem que será exibida, através do valor de uma variável.

Exemplo 03: Tabmém conseguimos modificar o tipo de um elemento de formulário: < input [type]="tipo">, você já deve ter acessado algum site, onde é possível exibir a senha, correto? Basicamente é alterado o valor de uma variável de password para text.

Que tal praticarmos um pouco? Acompanhe a aula abaixo, tenho certeza que irá gostar: