v-model はフォーム入力と状態の一部の間に双方向バインディングを作成します。入力は状態の値を表示し、入力を編集すると状態が更新されます — 自動的に、両方向で。
vue
<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 のフォームの基礎です — 双方向データフローのための手動の値バインディング + イベントハンドリング ボイラープレートを排除します。
