v-model Vínculo Bidirecional em Formulários
Última atualização: 2026-10-22
v-model Vínculo Bidirecional em Formulários
O v-model cria vínculo bidirecional entre o controle de formulário e os dados: digitar atualiza o estado, e mudanças no estado repovoam o controle.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<input v-model="name">
<textarea v-model="desc"></textarea>
<input type="checkbox" v-model="agree">
<select v-model="city"><option>São Paulo</option></select>⚙️ Argumentos
| expression | A propriedade de estado a vincular; os modificadores .lazy, .number e .trim ajustam a sincronização |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Typing in the input updates the greeting in real time.💡 Pontos-chave
💡 Dica O modificador .number converte para número automaticamente — indispensável em cálculos numéricos.
ℹ️ Nota Checkbox vinculado a um array coleta múltiplos valores; vinculado a um booleano, funciona como um único interruptor.
⚠️ Aviso O v-model é açúcar sintático de :value + @input; em componentes customizados, é definido via modelValue ou defineModel().
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O valor vinculado é número ou string?
R Strings por padrão — adicione .number, especialmente em inputs numéricos.
P Como o v-model funciona em um componente customizado?
R Declare o prop modelValue + o evento update:modelValue (ou use defineModel() a partir do 3.4).
P Vários inputs podem vincular o mesmo estado?
R Sim — todos ficam sincronizados; editar um atualiza os outros imediatamente.
