做网站哈尔滨,wordpress重启,在线图片处理工具,营销型网站是啥意思在前端的处理中#xff0c;表单的处理永远是占高比例的。在BOMDOMjs的时候是这样#xff0c;在Vue的时候也是这样。Vue的表单处理做了特别的优化#xff0c;如值绑定、数据验证、错误提示、修饰符等。
表单组件的示例#xff1a;
script setup langts表单的处理永远是占高比例的。在BOMDOMjs的时候是这样在Vue的时候也是这样。Vue的表单处理做了特别的优化如值绑定、数据验证、错误提示、修饰符等。
表单组件的示例
script setup langts
import {ref} from vue
import axios from axiosconst nameref();const genderref();const birthDateref();const phoneref();const applyReasonref();const scopesref([]);const luckyNumberref(1);function submitForm(){axios({method:post,url:,params:{name:name.value,gender:gender.value,birthDate:birthDate.value,phone:phone.value,applyReason:applyReason.value,scopes:scopes.value,lunckyNumber:luckyNumber.value}}).then((res){console.log(res);});}function resetForm(){name.value;gender.value;birthDate.value;phone.value;applyReason.value;scopes.value[];luckyNumber.value1;}
/scripttemplate
formdivdiv姓名:input v-modelname idname placeholderinput your name//divdiv性别:input typeradio valuemale idmale v-modelgender/lable formale男/lableinput typeradio valuefemale idfemale v-modelgender/lable forfemale女/lable/divdiv出生日期:input typedate idbirthDate v-modelbirthDate//divdiv手机号码:input typetext v-modelphone//divdiv申请理由:textarea v-modelapplyReason placeholderadd reason here/textarea/divdiv涉猎范围:input typecheckbox idreading valuereading v-modelscopes/lable forreading阅读/lableinput typecheckbox idsports valuesports v-modelscopes/lable forsports运行/lableinput typecheckbox iddreaming valuedreaming v-modelscopes/lable fordreaming冥想/lableinput typecheckbox idplaying valueplaying v-modelscopes/lable forplaying操作/lable/divdiv幸运数字:select nameselect v-modelluckyNumberoption selected1/optionoption2/optionoption3/optionoption4/optionoption5/optionoption6/optionoption7/optionoption8/optionoption9/option/select/divdivbutton typebutton clicksubmitForm提交/buttonbutton typebutton clickresetForm重置/button/div/div
/form
/templatestyle/style v-model在Vue中有三种修饰符
v-model.lazy 由原来的input事件之后更新v-model的值改为change事件之后更新v-model的值这对复合组件和计算属性有很大的作用
v-model.number 用户输入的内容会被自动转换为数字输入框有typenumber时会自动启用
v-model.trim 用户的输入内容会自动去除两端的空格
