v-model はフォーム入力と状態の一部の間に双方向バインディングを作成します。入力は状態の値を表示し、入力を編集すると状態が更新されます — 自動的に、両方向で。
<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>
v-model は Vue のフォームの基礎です — 双方向データフローのための手動の値バインディング + イベントハンドリング ボイラープレートを排除します。
:value + @input に脱糖することが理解できれば、これを明確にし、独自のコンポーネントに v-model を実装する方法を説明します。一方、修飾子（.trim/.number/.lazy）は一般的な入力処理のニーズを宣言的に処理します。
内部では、v-model は :value バインディングと @input リスナーを組み合わせています：
<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
つまり、魔法ではなく — bind-and-update パターンの便利な略記法です。
<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 は各コントロールタイプ（value/input、checked/change など）に対して正しいプロパティ/イベントを選択します。
<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" -->
これにより、ネイティブ入力と同じように v-model で動作する再利用可能な入力コンポーネントを構築できます（Vue 3 は複数の名前付き v-models もサポートしています：v-model:title、v-model:body）。