2.8 收集表单数据

在项目开发中，表单是常见的页面效果。我们常常需要让表单输入框根据JavaScript中的变量数据来实现动态显示，同时需要将用户输入的数据实时同步到JavaScript变量中。在Vue中，比较原始的做法是给输入框绑定动态value属性和input监听来实现，语法格式如下。

其实可以通过v-model指令来简化代码，具体如下。

使用这种方式，输入框可以根据msg初始化动态显示和更新动态显示。同时用户在输入时，输入的数据会自动保存到msg上。这就是前面所说的双向数据绑定的效果。

下面具体讲解使用v-model指令收集表单数据的相关内容。

2.8.1 使用v-model指令

v-model指令可应用在各种不同类型的表单输入元素上，包括input、textarea、select。

它会根据所应用的元素的不同，自动扩展到不同的DOM属性和事件监听上。下面列举了3种情况。

● text类型和password类型的input和textarea：value属性和input事件监听。

● radio类型和checkbox类型的input：checked属性和change事件监听。

● select：value属性和change事件监听。

下面通过一个案例来演示使用v-model指令收集用户注册表单的各种数据的方法，如图2-40所示。

该表单页面中共有8个表单输入元素，其中账号、密码和年龄为输入框，性别为单选按钮，爱好、阅读并接受《用户协议》为复选框，所属校区为下拉列表，其他信息为文本框。

读者可以先尝试写出实现代码，或者整理出大体思路，再对照下方实现代码进行学习。如果思路不清晰，可以先对下方代码进行阅读思考，再独立写出实现代码。当然，下面也会给出分析和说明，以帮助读者更好地理解本案例。如图2-40所示的表单页面及其功能的完整实现代码如下。

Vue代码如下。

JavaScript代码如下。

在这个案例中，我们利用v-model指令收集input、textarea和select表单元素的数据。这里有几点需要注意。

（1）如果我们想将多个表单元素输入数据收集到一个单独的对象userInfo中，那么v-model指令指定的表达式必须是userInfo.xxx，而xxx则需要是对象userInfo中的某个已有的属性名，用来存储当前表单元素输入数据。

（2）具有多个radio的单选按钮，必须指定用于收集的不同value属性，否则效果完全不正确。值得一提的是，如果v-model指令指定的是同一个表达式userInfo.sex，则收集的是被选中的某个radio的value属性。如果初始想选中某个radio，则需要让sex的初始值为被选中radio的value属性。

（3）具有多个checkbox的复选框，需要指定用于收集的不同value属性。与单选按钮类似，v-model指令指定的也是同一个表达式userInfo.hobby，收集到的是所有被选中checkbox的value属性组成的数组。如果初始想选中某个checkbox，则hobby数组的初始值需要包含其value属性。

（4）具有单个checkbox的复选框，不需要指定value属性，v-model指令收集的是布尔值，具体地说，当被选中时为true，反之为false。

（5）select上的v-model指令用于收集被选中的option的value属性。

（6）表单提交监听需要绑定在form标签上，同时需要通过.prevent事件修饰符来阻止表单自动提交。

（7）案例中的点击按钮＠submit.prevent="confirm"，在confirm回调中发送注册的AJAX请求。

2.8.2 相关指令修饰符

Vue为v-model指令提供了相关的指令修饰符，用于满足特定场景的需求，基本语法为“v-model.指令修饰符名”。下面就来学习v-model指令相关的3个指令修饰符。

1）.lazy

在默认情况下，绑定v-model指令的输入框在用户输入过程中，会自动将输入数据实时同步到data的对应属性上。而加上.lazy修饰符后，在用户输入过程中输入数据不会被实时同步到data的对应属性上，只有当输入框失去焦点时输入数据才会被同步。

事实上，在不添加.lazy修饰符时，内部绑定的是input事件，而添加.lazy修饰符后，内部绑定的是change事件。input事件在输入过程中触发，而change事件在输入数据被修改且输入框失去焦点后触发。

2）.trim

在默认情况下，输入文本两端的空格会被同步到data的对应属性上，如果手动去除这些空格，对于开发者来说会比较麻烦，此时可以直接通过.trim修饰符将文本两端的空格自动去除后，再同步到data的对应属性上。

3）.number

在默认情况下，一个非number类型的输入框收集的都是文本字符串，即便输入的内容是数值，也会被转换为数值字符串。通过.number修饰符可以在输入的是纯数值文本，或者前面部分是数值文本的情况下，将数据自动转换为数值后再同步到data的对应属性上。如果前面部分不是数值文本，则会直接将文本字符串同步到data的对应属性上。

下面通过一个综合案例来演示上面3种指令修饰符的使用方法，如下代码所示。

Vue代码如下。

JavaScript代码如下。

运行代码后，在账号1对应的输入框中输入数据时，输入过程中，account1不会发生变化，只有在输入框失去焦点后，才变化为输入框中输入的数据，如图2-41和图2-42所示。

在账号2对应的输入框中输入文本并在其左右输入空格时，account2不会发生变化；在输入框失去焦点后，输入框中输入的空格自动消失，如图2-43和图2-44所示。

在账号3对应的输入框中输入6时，account3的值为数值6；在输入67a时，account3的值为数值67；但在输入a6时，account3的值为字符串a6，如图2-45、图2-46和图2-47所示。