Vue收集表单数据

一、收集text类型的表单数据

一般常用的text类型输入框和password类型使用v-model进行数据双向绑定即可，但是要注意的是，v-model绑定的对象是value。

其完整写法是v-model:value="account"

 二、收集radio类型的表单数据

收集radio表单的时候我们需要设置value的值，双向数据绑定收集到是值就是指定的value值

 

如果我们想要设置初始值，可以直接给sex设置对应的value值：

三、收集checkbox类型的表单数据

 （一）收集单个checkbox

在只有一个checkbox的情况下，如果我们绑定一个属性，选中的值就为true，取消选中的值为false

 （二）收集多个checkbox

当有多个checkbox的时候，我们不仅要设置value值，还要使用数组来接收选中属性。

点击勾选的对象就会将value存入数组中。

四、收集select类型的表单数据 

直接在select标签上绑定v-model即可，选中值即为option的value值

五、收集textarea类型的数据表单 

直接写v-model即可使用

 

六、v-model的事件修饰符 

（一）.number

添加该修饰符后表单中的数据只收集最开始出现的数字

（二）.lazay

懒加载，当我们填写textarea类型的表单时，实时监测数据的变化会使效率变低，使用了懒加载只有失去焦点才会使数据变化。

 

（三）.trim 

清除输入内容前和后的空格