表单处理

这一课你将能做到

1. 用 v-model 实现输入框、文本域、复选框、单选框、下拉框的双向绑定
2. 使用 .lazy、.number、.trim 修饰符优化表单体验
3. 在自定义组件上实现 v-model
4. 编写基础表单校验逻辑

为什么要学

表单是用户输入数据的「入口」。登录、注册、搜索、设置，全是表单。Vue 的 v-model 把「取值 → 更新数据」和「数据变 → 更新视图」自动化，是双向绑定的核心。

人话：v-model 就像「自动同步的笔记本」。你在左边写（用户输入），右边自动更新（数据变化）；你在右边改（代码修改），左边自动刷新（视图更新）。

先建立图像

<script setup>
import { ref } from 'vue'
const username = ref('')
const agreed = ref(false)
</script>

<template>
  <input v-model="username" placeholder="用户名">
  <p>你输入了：{{ username }}</p>
  
  <label>
    <input type="checkbox" v-model="agreed"> 同意协议
  </label>
  <p>同意：{{ agreed }}</p>
</template>

跟着做

步骤 1：各种表单控件的 v-model

<script setup>
import { ref } from 'vue'
const text = ref('')
const textarea = ref('')
const checked = ref(false)
const checkedNames = ref([])
const picked = ref('')
const selected = ref('')
</script>

<template>
  <!-- 文本框 -->
  <input v-model="text" placeholder="单行文本">

  <!-- 文本域 -->
  <textarea v-model="textarea" placeholder="多行文本"></textarea>

  <!-- 单个复选框 -->
  <input type="checkbox" v-model="checked"> 勾选

  <!-- 多个复选框（绑定到数组） -->
  <input type="checkbox" value="游泳" v-model="checkedNames"> 游泳
  <input type="checkbox" value="跑步" v-model="checkedNames"> 跑步

  <!-- 单选框 -->
  <input type="radio" value="男" v-model="picked"> 男
  <input type="radio" value="女" v-model="picked"> 女

  <!-- 下拉框 -->
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
  </select>
</template>

步骤 2：修饰符

<script setup>
import { ref } from 'vue'
const lazyText = ref('')
const age = ref('')
const trimmed = ref('')
</script>

<template>
  <!-- .lazy：失去焦点或回车后才更新 -->
  <input v-model.lazy="lazyText" placeholder="懒更新">

  <!-- .number：自动转数字 -->
  <input v-model.number="age" type="number" placeholder="数字">

  <!-- .trim：自动去首尾空格 -->
  <input v-model.trim="trimmed" placeholder="去空格">
</template>

步骤 3：自定义组件的 v-model

<!-- CustomInput.vue -->
<script setup>
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput">
</template>