A v-model kétirányú kötést hoz létre egy űrlapbevitel és az állapot egy része között: a bevitel megjeleníti az állapot értékét, és a bevitel szerkesztése frissíti az állapotot — automatikusan, mindkét irányban.
<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>
A motorháztető alatt a egy kötést és egy figyelőt kombinál:
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Tehát ez nem varázsság — csak egy praktikus rövidítés a bind-és-frissítés mintához.
<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>
A Vue az egyes vezérlőtípusokhoz a megfelelő tulajdonságot/eseményt választja (érték/bevitel, jelölve/változás, stb.).
<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" -->
Ez lehetővé teszi olyan újrahasznosítható beviteli komponensek létrehozását, amelyek a v-model-lel működnek, mint a natív bemenetek (a Vue 3 még több elnevezett v-modellt is támogat: v-model:title, v-model:body).
A v-model a Vue-ban az űrlapok sarokköve — felszámolja a kézi érték-kötés + eseménykezelés boilerplate-et a kétirányú adatfolyam szempontjából.
Annak megértése, hogy :value + @inputra desugároz, megvilágítja azt, és elmagyarázza, hogyan lehet a v-model-t implementálni saját komponenseire, miközben a módosítók (.trim/.number/.lazy) deklaratívan kezelik az általános bemeneti feldolgozási igényeket.