Vue3 表单

表单是收集用户输入的主要方式。传统写法要手动绑定 value 再监听 change 事件，来回同步很繁琐。Vue3 的 v-model 指令实现了表单控件与数据的双向绑定：用户输入会更新数据，数据变化也会回填控件，一处声明、双向生效。

v-model 基础：文本框

v-model 用在 input、textarea 上时，等价于"绑定 value + 监听 input 事件"的组合写法：

<template>
  <p>你好，{{ name }}</p>
  <input v-model="name" placeholder="输入你的名字" />
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

效果：在输入框打字，上方的文字实时跟着变化；反过来给 name 赋值，输入框也会同步显示。

复选框与单选框

复选框、单选框绑定的不是 value 而是"选中状态"，使用上略有区别：

<template>
  <!-- 单个复选框：绑定布尔值 -->
  <input type="checkbox" id="agree" v-model="agree" />
  <label for="agree">我已阅读协议</label>

  <!-- 一组复选框：绑定数组，勾选即加入 value -->
  <input type="checkbox" value="篮球" v-model="hobbies" /> 篮球
  <input type="checkbox" value="吉他" v-model="hobbies" /> 吉他

  <!-- 单选框：绑定选中项的 value -->
  <input type="radio" value="男" v-model="gender" /> 男
  <input type="radio" value="女" v-model="gender" /> 女
</template>
<script setup>
import { ref } from 'vue'
const agree = ref(false)
const hobbies = ref([]) // 勾选后自动把对应 value 放入数组
const gender = ref('')
</script>

下拉选择框 select

select 用 v-model 绑定当前选中 option 的 value；加上 multiple 属性后支持多选，此时绑定数组：

<template>
  <select v-model="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
  <p>你选择了：{{ city }}</p>
</template>
<script setup>
import { ref } from 'vue'
const city = ref('shanghai')
</script>

效果：默认显示上海；切换选项后数据与页面显示同步更新。

v-model 修饰符

v-model 提供三个常用修饰符：.trim 自动去掉首尾空格，.number 自动把输入转为数字，.lazy 改为在 change 事件（失焦）时才同步，而不是每次按键都同步：

<template>
  <input v-model.trim="username" />
  <input v-model.number="age" type="number" />
  <input v-model.lazy="remark" />
</template>

提醒：修饰符只是便捷工具，正式提交前仍应做完整校验，不能完全依赖它们保证数据正确。

小结

v-model 让表单开发从"手工搬运数据"升级为"声明式双向绑定"：文本框、单选框、复选框、下拉框一网打尽，配合修饰符还能顺手处理空格、数字与同步时机。至此条件、循环、事件、表单都已掌握，你可以写出完整的可交互页面了。