Vue.js 表单

Vue.js 表单Vue 使用v-model指令在表单控件上实现双向数据绑定自动处理输入值与数据的同步。一、v-model 基本原理!-- v-model 是以下写法的语法糖 -- input v-modelmsg / !-- 等价于 -- input :valuemsg inputmsg $event.target.value /v-model会根据控件类型自动选择正确的属性和事件文本类valueinput复选框checkedchange单选框checkedchange选择框valuechange二、各表单控件用法1. 文本输入text / textareatemplate !-- 单行文本 -- input v-modelname placeholder请输入姓名 / p姓名: {{ name }}/p !-- 多行文本 -- textarea v-modeldesc placeholder请输入描述/textarea p描述: {{ desc }}/p /template script setup import { ref } from vue const name ref() const desc ref() /script注意textarea{{ text }}/textarea在 Vue 中不生效必须使用v-model。2. 复选框checkboxtemplate !-- 单个复选框 — 绑定布尔值 -- input typecheckbox v-modelagreed / label同意协议: {{ agreed }}/label !-- 多个复选框 — 绑定数组 -- input typecheckbox v-modelhobbies value阅读 / 阅读 input typecheckbox v-modelhobbies value运动 / 运动 input typecheckbox v-modelhobbies value音乐 / 音乐 p爱好: {{ hobbies }}/p /template script setup import { ref } from vue const agreed ref(false) const hobbies ref([]) // 选中值会自动 push/splice 到数组 /script3. 单选框radiotemplate input typeradio v-modelgender valuemale / 男 input typeradio v-modelgender valuefemale / 女 p性别: {{ gender }}/p /template script setup import { ref } from vue const gender ref() /script4. 选择框selecttemplate !-- 单选 -- select v-modelcity option disabled value请选择城市/option option valuebj北京/option option valuesh上海/option option valuegz广州/option /select p城市: {{ city }}/p !-- 多选 -- select v-modelcities multiple option valuebj北京/option option valuesh上海/option option valuegz广州/option /select p城市: {{ cities }}/p !-- 动态渲染选项 -- select v-modelselectedId option v-foritem in options :keyitem.id :valueitem.id {{ item.label }} /option /select /template script setup import { ref } from vue const city ref() const cities ref([]) const selectedId ref() const options ref([ { id: 1, label: 北京 }, { id: 2, label: 上海 }, { id: 3, label: 广州 } ]) /script三、修饰符1..lazy默认v-model在input事件时同步数据。.lazy改为在change事件失去焦点或按回车时同步!-- 输入过程中不更新失去焦点时才更新 -- input v-model.lazymsg /2..number自动将输入值转为数字类型input v-model.numberage typenumber / !-- age 为 Number 类型而非 String --如果值无法被parseFloat()解析则保留原始字符串。3..trim自动去除首尾空白字符input v-model.trimname /修饰符对比修饰符作用触发时机.lazy延迟同步change事件失焦/回车.number转为数字input事件.trim去首尾空格input事件四、组件上的 v-modelVue 3 默认约定!-- 父组件 -- CustomInput v-modelsearchText / !-- 等价于 -- CustomInput :modelValuesearchText update:modelValuesearchText $event /!-- CustomInput.vue -- script setup defineProps([modelValue]) const emit defineEmits([update:modelValue]) const onInput (e) { emit(update:modelValue, e.target.value) } /script template input :valuemodelValue inputonInput / /template具名 v-modelVue 3Vue 3 支持在一个组件上使用多个v-model!-- 父组件 -- UserForm v-model:nameuserName v-model:ageuserAge / !-- 等价于 -- UserForm :nameuserName update:nameuserName $event :ageuserAge update:ageuserAge $event /!-- UserForm.vue -- script setup defineProps([name, age]) const emit defineEmits([update:name, update:age]) /script template input :valuename inputemit(update:name, $event.target.value) / input :valueage inputemit(update:age, Number($event.target.value)) / /template五、完整表单实战template form submit.preventhandleSubmit !-- 姓名 -- div label姓名:/label input v-model.trimform.name placeholder请输入姓名 / /div !-- 年龄 -- div label年龄:/label input v-model.numberform.age typenumber / /div !-- 性别 -- div label性别:/label input typeradio v-modelform.gender valuemale / 男 input typeradio v-modelform.gender valuefemale / 女 /div !-- 爱好 -- div label爱好:/label input typecheckbox v-modelform.hobbies valuereading / 阅读 input typecheckbox v-modelform.hobbies valuesports / 运动 input typecheckbox v-modelform.hobbies valuemusic / 音乐 /div !-- 城市 -- div label城市:/label select v-modelform.city option disabled value请选择/option option v-forc in cityList :keyc :valuec{{ c }}/option /select /div !-- 备注 -- div label备注:/label textarea v-model.lazyform.remark placeholder失焦时同步/textarea /div !-- 同意协议 -- div input typecheckbox v-modelform.agreed / 同意协议 /div button typesubmit :disabled!form.agreed提交/button /form /template script setup import { ref, reactive } from vue const form reactive({ name: , age: null, gender: , hobbies: [], city: , remark: , agreed: false }) const cityList [北京, 上海, 广州, 深圳] const handleSubmit () { console.log(提交数据:, JSON.stringify(form, null, 2)) } /script六、注意事项要点说明v-model 与 value不要同时使用:value和v-model会冲突textarea必须用v-model插值{{ }}不生效select 默认项用option disabled value请选择/option提供默认提示checkbox 绑定数组多选时v-model绑定数组value指定选中时的值number 类型typenumber只控制键盘v-model.number才控制数据类型reactive vs ref表单推荐reactive属性访问更简洁form.name而非form.value.name初始值始终为v-model绑定提供初始值避免未定义行为