v-model 在 form input 和 state 之间创建双向绑定：input 显示 state 的值，编辑 input 会更新 state — 自动地，双向流动。
<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 的底层原理是结合了 绑定和 监听器：
: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" -->
这让你可以构建可复用的 input 组件，它们可以像原生 input 一样与 v-model 一起工作（Vue 3 甚至支持多个命名 v-models：v-model:title、v-model:body）。
v-model 是 Vue 中表单的基石 — 它消除了双向数据流中手动 value 绑定 + 事件处理的样板代码。
理解它如何被转译为 :value + @input 揭开了它的神秘面纱，并解释了如何在你自己的组件上实现 v-model，而修饰符（.trim/.number/.lazy）则以声明式的方式处理常见的 input 处理需求。