O que o v-bind faz?

Question

O que o v-bind faz?

Accepted Answer

`v-bind` vincula dinamicamente um **atributo HTML** (ou prop de componente) a uma expressão JavaScript, para que o atributo seja atualizado reativamente quando os dados mudam. Seu atalho é apenas `:`. ```vue ``` A diferença entre `:src="imageUrl"` e `src="imageUrl"` é crucial: sem `:`, é uma string literal; com ela, Vue avalia a expressão. ## Vinculando classes e estilos (manipulação especial) ```vue ``` Vue fornece a `:class` e `:style` sintaxe especial de objeto/array para aplicar condicionalmente classes e estilos inline. ## Vinculando um objeto inteiro de atributos ```vue ``` `v-bind` sem um argumento espalha as chaves de um objeto como múltiplos atributos — prático para passar muitas props de uma vez. ## Passando props para componentes ```vue ``` A mesma sintaxe `:prop` passa dados para componentes filhos (não apenas atributos DOM). ## Por que isso importa `v-bind` (`:`) é como você torna atributos e props **dinâmicos e reativos** — o equivalente a `{{ }}` para conteúdo. É usado constantemente: vinculando `src`/`href`/`disabled`, `:class`/`:style` condicional e passando props para componentes. Conhecer as sintaxes de objeto/array para class/style e a forma spread de objeto cobre quase todas as necessidades de vinculação de atributos.