v-model フォーム入力の双方向バインディング
最終更新：2026-10-22
v-model フォーム入力の双方向バインディング
v-model はフォームコントロールとデータの間に双方向バインディングを作ります。入力が状態を更新し、状態の変化がコントロールに反映されます。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<input v-model="name">
<textarea v-model="desc"></textarea>
<input type="checkbox" v-model="agree">
<select v-model="city"><option>武漢</option></select>⚙️ 引数
| expression | バインドするデータのプロパティ。.lazy（change 時に同期）、.number（数値化）、.trim（空白除去）の各修飾子が使えます |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Typing in the input updates the greeting in real time.💡 ポイント
💡 ヒント .number 修飾子は自動的に数値へ変換します。数値計算では必須です（付けないと文字列になります）。
ℹ️ 補足 チェックボックスを配列にバインドすると複数選択の値を収集できます。ブール値にバインドすると単一のトグルになります。
⚠️ 注意 v-model は本質的に :value + @input の糖衣構文です。カスタムコンポーネント上の v-model は defineModel() または modelValue で実装します。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q 入力欄から取得できるのは数値ですか、文字列ですか？
A デフォルトは文字列です。数値が必要なら .number 修飾子を付けてください（number 型の入力欄では特に重要です）。
Q v-model はカスタムコンポーネント上でどう書きますか？
A コンポーネント内で modelValue プロップと update:modelValue イベントを宣言します（または Vue 3.4 以降の defineModel()）。
Q 複数の入力欄を同じデータにバインドできますか？
A できます。すべて同期され、どれか 1 つを入力すると他の入力欄にも即座に反映されます。
