框架集成：12 Vue表单与HTML - 详细教程与实战指南

<!-- 文本输入 -->
<input v-model="form.name" placeholder="请输入姓名" />

<!-- 多行文本 -->
<textarea v-model="form.bio" rows="3" placeholder="个人简介"></textarea>

<!-- 单选框 - 绑定字符串值 -->
<label><input type="radio" v-model="form.gender" value="male" /> 男</label>
<label><input type="radio" v-model="form.gender" value="female" /> 女</label>

<!-- 单个复选框 - 绑定布尔值 -->
<label><input type="checkbox" v-model="form.agree" /> 同意服务条款</label>

<!-- 多个复选框 - 绑定数组 -->
<label v-for="skill in allSkills" :key="skill">
  <input type="checkbox" :value="skill" v-model="form.skills" /> {{ skill }}
</label>

<!-- 单选下拉 -->
<select v-model="form.level">
  <option disabled value="">请选择等级</option>
  <option value="beginner">初学者</option>
  <option value="intermediate">中级</option>
  <option value="advanced">高级</option>
</select>

<!-- 多选下拉 -->
<select v-model="form.courses" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="vue">Vue</option>
</select>

<!-- .lazy - 在change而非input时更新 -->
<input v-model.lazy="lazyValue" placeholder="失去焦点时更新" />

<!-- .number - 自动转为数字类型 -->
<input v-model.number="numValue" type="number" placeholder="输入数字" />

<!-- .trim - 自动去除首尾空格 -->
<input v-model.trim="trimValue" placeholder="输入带空格的文本" />

// 验证规则定义
const rules = {
  username: (v) => {
    if (!v.trim()) return '用户名不能为空';
    if (v.length < 3) return '用户名至少3个字符';
    if (v.length > 20) return '用户名最多20个字符';
    return '';
  },
  email: (v) => {
    if (!v.trim()) return '邮箱不能为空';
    if (!/\S+@\S+\.\S+/.test(v)) return '邮箱格式不正确';
    return '';
  },
  password: (v) => {
    if (!v) return '密码不能为空';
    if (v.length < 6) return '密码至少6位';
    if (!/[A-Z]/.test(v)) return '需要包含大写字母';
    if (!/[a-z]/.test(v)) return '需要包含小写字母';
    if (!/[0-9]/.test(v)) return '需要包含数字';
    return '';
  }
};

// 字段验证函数
function validateField(field) {
  touched[field] = true;
  errors[field] = rules[field](validForm[field]);
}

// 全表单验证
const isFormValid = computed(() => {
  return Object.keys(rules).every(key => !rules[key](validForm[key]));
});

<!-- 不推荐：手动实现双向绑定 -->
<input :value="name" @input="name = $event.target.value" />

<!-- 推荐：使用v-model -->
<input v-model="name" />

<!-- 不推荐：v-model与v-for混用在同一个元素 -->
<input v-for="item in items" v-model="item.value" :key="item.id" />

<!-- 推荐：使用独立的组件或对象属性 -->
<div v-for="item in items" :key="item.id">
  <input v-model="item.value" />
</div>

<!-- 自定义组件的v-model -->
<!-- Vue 3: modelValue + update:modelValue -->
<CustomInput v-model="searchText" />
<!-- 等同于 -->
<CustomInput :modelValue="searchText" @update:modelValue="searchText = $event" />

<!-- 支持多个v-model -->
<UserForm v-model:first-name="first" v-model:last-name="last" />