v-model erzeugt Zwei-Wege-Binding zwischen einer Formulareingabe und einem Zustand: die Eingabe zeigt den Wert des Zustands an, und das Bearbeiten der Eingabe aktualisiert den Zustand — automatisch, in beide Richtungen.
<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>
Es ist syntaktischer Zucker
Unter der Haube kombiniert v-model ein :value Binding und einen @input Listener:
<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Also ist es keine Magie — nur eine praktische Abkürzung für das Bind-und-Aktualisierungs-Muster.
<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 wählt die richtige Eigenschaft/das richtige Ereignis für jeden Steuerelementtyp (value/input, checked/change, usw.).
<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" -->
Dies ermöglicht es dir, wiederverwendbare Eingabekomponenten zu erstellen, die mit v-model genau wie native Eingaben funktionieren (Vue 3 unterstützt sogar mehrere benannte v-models: v-model:title, v-model:body).
v-model ist der Grundstein von Formularen in Vue — es eliminiert das manuelle Value-Binding + Event-Handling-Boilerplate für bidirektionalen Datenfluss.
Das Verständnis, dass es sich zu :value + @input desugared, entmystifiziert es und erklärt, wie du v-model bei deinen eigenen Komponenten implementierst, während Modifiers (.trim/.number/.lazy) häufige Input-Processing-Anforderungen deklarativ bewältigen.