HTML中value使用指定数据,Vue - 如何通过value值来操作表单数据

与用户交互是页面一个很重要的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事件合适。