v-model cria vinculação bidirecional entre uma entrada de formulário e uma parte do estado: a entrada mostra o valor do estado, e editar a entrada atualiza o estado — automaticamente, em ambas as direções.
<script setup>
import { ref } from "vue";
const name = ref("");
</script>
<template>
<input v-model="name" />
<p>You typed: {{ name }}</p> <!-- updates live as you type -->
</template>
Por baixo, combina uma vinculação e um listener :
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Portanto, não é mágica — apenas um atalho conveniente para o padrão de vinculação e atualização.
<template>
<input v-model="text" /> <!-- text -->
<textarea v-model="message" />
<input type="checkbox" v-model="agreed" /> <!-- boolean -->
<input type="radio" value="a" v-model="choice" />
<select v-model="selected">...</select>
</template>
Vue escolhe a propriedade/evento certo para cada tipo de controle (value/input, checked/change, etc.).
<input v-model.trim="name" /> <!-- auto-trim whitespace -->
<input v-model.number="age" /> <!-- cast to a number -->
<input v-model.lazy="text" /> <!-- sync on `change` instead of every keystroke -->
<!-- a component can support v-model via a `modelValue` prop + `update:modelValue` event -->
<CustomInput v-model="name" />
<!-- equivalent to :model-value="name" @update:model-value="name = $event" -->
Isso permite que você crie componentes de entrada reutilizáveis que funcionam com v-model assim como entradas nativas (Vue 3 até suporta múltiplos v-models nomeados: v-model:title, v-model:body).
v-model é a pedra angular dos formulários em Vue — elimina a vinculação de valor manual + boilerplate de tratamento de eventos para fluxo de dados bidirecional.
Entender que desugars para :value + @input desmistifica e explica como implementar v-model em seus próprios componentes, enquanto modificadores (.trim/.number/.lazy) lidam com necessidades comuns de processamento de entrada de forma declarativa.
Uma biblioteca de perguntas de entrevista de TI com respostas detalhadas — de Júnior a Sênior.
Doar