v-model 收集表单数据

结论：

        1.如果你需要收集的表单类型，是需要自己敲键盘输入的，那么v-model收集的数据就是你输入的数据。具体常用的有以下几种

 <input type="text">

 <input type="password">

<input type="number">

<textarea></textarea>

                ...

       2. 如果你收集的表单类型为单选框。那么v-model收集的数据为你手动给单选框配置的value值。如：

性别：
     男：<input type="radio" name="sex" v-model="sex"  value="male">
     女：<input type="radio" name="sex" v-model="sex" value="female">

 

最后收集到的数据为‘femal’

      3.如果你需要收集的是复选框

        情况1： 你并没有设置value属性，那么收集到的数据为checked（是一个布尔值）

爱好:
    学习 <input type="checkbox" v-model="hobby" >
    打游戏 <input type="checkbox" v-model="hobby" >
    吃饭 <input type="checkbox" v-model="hobby" >

  没有配置value，收集到的数据为布尔类型

        情况2：你配置了value属性，但是v-model的初始值为非数组，那么收集到的情况与情况1一致

爱好:
    学习 <input type="checkbox" v-model="hobby" value="study">
    打游戏 <input type="checkbox" v-model="hobby" value="game">
    吃饭 <input type="checkbox" v-model="hobby" value="eat">

 

当hobby的初始值为空字符时，我收集到的hobby为 布尔类型

        情况3：你配置了value属性，v-model的初始值为数组，那么最终收集到的数据为value组成的数组。

爱好:
    学习 <input type="checkbox" v-model="hobby" value="study">
    打游戏 <input type="checkbox" v-model="hobby" value="game">
    吃饭 <input type="checkbox" v-model="hobby" value="eat">

 

 

 

 hobby的初始值为[],此时勾选了打游戏和吃饭，那么hobby收集到的数据为study和game组成的数组。

扩展：

        v-model的修饰符    

1.trim  ： 忽略空格

2.lazy ： 失去焦点时收集value值

3.number  ：强制转变为number类型