Vue 2x 系列之（十四）收集表单数据

收集表单数据

如何利用Vue提供的v-model收集一个表单中的数据

v-model配合不同的input标签有不同的技巧

hobby的初始值能够影响v-model收集回来的数据

hobby为字符串，收集到的是checked属性的值

hobby为数组，收集到的是自己定义的value属性的值

多选框【CheckBox】如果不指定value，默认的value就是checked属性的值

v-model的修饰符：

number：自动将输入的数值类型的数据转为number类型数据，即使与input框绑定的属性已经指定为字符串，通常与input标签的type='number'一起用，type='number'控制输入框只能输入数值。

trim：如果input框中输入的值前后有空格，与之绑定的属性获取到值时会自动去除字符串前后的空格

lazy：input框与data中的属性绑定后，当input失去焦点时，与之绑定的属性才会获取到input框的值；如果不加该修饰符，input框的值只要有变动，与之绑定的属性的值就会变动

收集表单数据：
		若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
		若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值，对于同一个单选按钮组的单选按钮，要设置相同的name。
		若：<input type="checkbox"/>
				1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				2.配置了input的value属性:
						(1)data中属性的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
						(2)data中属性的初始值是数组，那么收集的的就是value组成的数组
		备注：v-model的三个修饰符：
						lazy：失去焦点再收集数据
						number：输入字符串转为有效的数字
						trim：输入首尾空格过滤