与用户交互是页面一个很重要的part,日常工作中处理与用户交互相关的工作也比较多,而表单是与用户交互的主要方式之一,因此Vue也为我们提供了一系列操作表单数据的方法,下面来唠一唠这些方法~
开唠之前我们得先准备一个表单~(哎呀妈呀我才知道vscode有截图的插件,我以前截图太辛苦了TAT,唔。。。就是这字可能有点小,不打紧,反正这里就是一个平平无奇的表单,涵盖了常用的表单元素,text,radio,checkbox,blablabla~)
text
text之前已经说过了,直接v-model就行了,这里简单带过一下,毕竟一家人就是要整整齐齐圆圆满满的才好~
HTML:
JS:
这里提一嘴,submit按钮会默认将表单提交到form中action指定的地方,如果没写action就会默认刷新页面,也就是将内容提交到当前页面,现在做表单一般不用这个默认的提交行为而是用js的方式手动提交,所以这里我们可以用.prevent禁止这个默认行为。AJAX在这里就不写了,简单打印一下验证是否获取表单数据成功~
HTML:
JS:
radio
从radio开始就要利用到value了~ 这里的value起到了一个标记作用,v-model绑定的变量则用于接收标记,从而达到可以在js中操作表单获取来的数据的效果。
HTML:
JS:
效果:
checkbox
这里的原理依然是利用value的标记作用~但由于checkbox是多选,所以应当用一个数组来接收标记。
HTML:
JS:
效果:
select
同样用到value来标记select中的每个option然后用变量接收标记~
HTML:
JS:
效果:
下拉菜单也支持多选,只要在select标签中加入multiple属性,然后对应的接收标记的变量变成数组,用户则按住shift来进行多选。
HTML:
JS:
效果:
textarea
操作textarea数据的方法和操作text的方法是一样的,直接双向绑定。
HTML:
JS:
效果:
表单域修饰符
除了之前说过的事件修饰符和按键修饰符,Vue还为我们提供了表单域修饰符用于表单域的特殊操作需求,具体用法是在v-model指令中加入修饰符。
number 转化为数值
用户通过表单传递到后台的数据均为字符串,因此遇到运算场景就需要将数据转换为数值型,修饰符number的作用就是将数据类型转换成数值型(仅限用户在表单输入域输入的数据)。
HTML:
JS:
效果:
trim 去掉开始和结尾的空格
下面是使用修饰符前输入空格后的数据长度:
HTML:
JS:
效果:
下面是使用了修饰符后输入空格后的数据长度:
HTML:
效果:
【注意】这里这能去掉字符串开头和结尾的空格,字符串中间的空格是去不掉的。
lazy 将input事件切换为change事件
input事件是当每次输入内容的时候都会被触发,而change事件是只有当失去焦点的时候才会被触发,触发的时机相较input事件晚。
在使用lazy修饰符之前:
v-model默认使用的事件是input事件,input事件会监控输入框的内容变化,只要一有变化事件就会被触发。
输入框除了input事件还有一个change事件,而这个chang事件被触发的时机是当失去焦点的时候。
使用lazy修饰符可以将输入框的input事件切换为change事件:
可运用的场景比如常常会遇到用户名是否已被占用验证,这个验证的动作需要在用户输入完整的用户名之后,因而用change事件合适。