第6课 表单与双向绑定理解 v-model 双向绑定的原理语法糖熟练使用 v-model 处理文本框、复选框、单选框、下拉框四类控件掌握常用修饰符.trim、.number能独立完成一个带校验和反馈的登录表单1. v-model 双向绑定原理1.1 什么是双向绑定单向绑定:value数据变 → 页面更新双向绑定v-model数据变 → 页面更新同时用户输入 → 数据自动更新1.2 v-model 是语法糖下面两行代码完全等价inputv-modelmessage/input:valuemessageinputmessage $event.target.value/v-model 自动做了两件事将数据的值绑定到控件的value/checked属性监听控件的input/change事件把最新值写回数据1.3 不同控件的内部机制控件绑定的属性监听的事件文本框 / 文本域valueinput复选框 / 单选框checkedchange下拉选择框valuechange不需要背诵但遇到奇怪表现时可回查此表。2. 四类控件的 v-model 用法2.1 文本框 / 密码框 / 文本域绑定字符串inputv-modelform.usernametypetextplaceholder请输入账号/inputv-modelform.passwordtypepassword/textareav-modelform.introplaceholder介绍一下自己/textarea输入什么数据就是什么实时同步。2.2 复选框单个复选框绑定布尔值inputtypecheckboxv-modelform.agree/同意协议!-- form.agree 为 true / false --适用于记住我、同意条款、开关选项。多个复选框绑定数组inputtypecheckboxvalue编程v-modelform.hobbies/编程inputtypecheckboxvalue音乐v-modelform.hobbies/音乐inputtypecheckboxvalue运动v-modelform.hobbies/运动!-- 选中编程和音乐后form.hobbies [编程, 音乐] --每个复选框必须有value属性选中的 value 会存入数组取消时自动移除。2.3 单选框绑定选中项的 valueinputtyperadiovalue男v-modelform.gender/男inputtyperadiovalue女v-modelform.gender/女!-- 选中男 → form.gender 男 --关键同一组的 radio 必须绑定同一个数据才能实现互斥。2.4 下拉选择框selectv-modelform.cityoptionvalue请选择城市/optionoptionvalue北京北京/optionoptionvalue上海上海/option/select!-- 选中上海 → form.city 上海 --v-model绑定的数据会匹配option的value如果没有value则取标签内的文本。2.5 控件绑定速查表控件关键写法绑定数据类型典型场景文本框/密码框/文本域v-modeldata字符串账号、密码、简介单个复选框v-modeldata布尔值记住我、同意协议多个复选框v-model数组每个带value数组爱好、权限多选单选框多个控件绑同一个数据字符串性别、状态选择下拉框v-model option 带value字符串城市、角色选择3. v-model 修饰符修饰符可以在同步数据前自动处理输入值。3.1.trim—— 去除首尾空格inputv-model.trimform.username/用户输入 admin → 实际存入admin。只去首尾中间空格保留。3.2.number—— 自动转为数字inputv-model.numberform.agetypenumber/输入18→ 存入数字18而非字符串18。注意如果输入非数字如abc则不会转换仍为字符串。3.3.lazy—— 失焦后才同步inputv-model.lazykeyword/默认是实时同步input事件加.lazy后改为失去焦点或按回车时才同步change事件。适用于不希望频繁触发计算或请求的大表单。4. 实战登录表单完整案例模式4.1 数据组织使用reactive一个对象集中管理所有表单字段便于整体操作。import{reactive,ref}fromvueconstloginFormreactive({username:,password:,remember:false})4.2 逻辑部分核心代码constloadingref(false)// 提交中状态constmessageref()// 提示文字constisSuccessref(false)// 提示类型asyncfunctionhandleLogin(){// ① 校验if(!loginForm.username||!loginForm.password){message.value请输入账号和密码isSuccess.valuefalsereturn}// ② 模拟提交loading.valuetruemessage.valueawaitnewPromise(resolvesetTimeout(resolve,800))// 模拟网络延迟// ③ 模拟验证结果if(loginForm.usernameadminloginForm.password123456){message.value登录成功欢迎回来${loginForm.username}isSuccess.valuetrue}else{message.value账号或密码错误isSuccess.valuefalse}loading.valuefalse}4.3 模板关键部分formsubmit.preventhandleLogin!-- 账号文本框 .trim --inputv-model.trimloginForm.usernametypetextplaceholder请输入账号/!-- 密码密码框 --inputv-modelloginForm.passwordtypepasswordplaceholder请输入密码/!-- 记住我单个复选框 --labelinputtypecheckboxv-modelloginForm.remember/记住我/label!-- 提交按钮动态禁用文案 --buttontypesubmit:disabledloading{{ loading ? 登录中… : 登录 }}/button!-- 结果提示v-if 控制显示动态 class 控制颜色 --pv-ifmessage:classisSuccess ? success : error{{ message }}/p/form4.4 表单提交标准流程固定套路收集用reactive对象收集所有控件值校验提交时进行非空、格式等检查不通过则中断提交进入 loading 状态禁用按钮调用接口或模拟反馈根据结果显示成功/失败提示这个模式适用于所有管理系统表单页后续学习 Element-Plus 表单时同样适用。5. 常见问题自查表现象可能原因解决方法输入框能显示但输入后数据不更新只用了:value未监听input改用v-model或者手动补全input更新逻辑复选框状态不对不是布尔值多个复选框用了同一个非数组数据多个复选框必须绑定数组单个复选框绑布尔值单选框无法互斥各 radio 的v-model绑定的是不同变量同一组 radio 必须绑定同一个数据下拉框选中后数据为空option缺少value属性给每个option加上value提交后页面刷新、数据丢失form未阻止默认提交行为使用submit.prevent明明输入了却提示“请输入”输入的是空格或密码框变量名写错文本框加.trim检查变量名对应关系点击按钮无反应方法未绑定或函数名拼写不一致检查submit或click绑定的函数名控制台报 xxx is not defined模板中使用了未定义的变量/方法确保script setup中已定义且拼写正确小结v-model:valueinput语法糖自动实现双向绑定不同控件文本框绑字符串单个复选框绑布尔多选复选框绑数组radio/select绑选中值修饰符.trim去首尾空格.number转数字.lazy失焦触发表单套路reactive对象收集 → 校验 → loading 提交 → 结果反馈
