Vue2第八节 收集表单数据

（1）文本类型/密码类型 v-model收集的是value值

    用户输入的就是value值

<input type="text" v-model="usrInfo.account">
<input type="password" v-model="usrInfo.password">

（2）number类型：限制输入的只能是数字

<input type="number" v-model.number="usrInfo.age">

 （3）radio类型

    v-model收集的是value值，需要手动给标签配置value值

男<input type="radio" name="sex" v-model="usrInfo.sex" value="male">
女<input type="radio" name="sex" v-model="usrInfo.sex" value="female">

    如果要设置默认选中，在data中配置要选中的数据即可

 

 （4）checkBox类型

   ① 如果没有配置input的value属性，那么收集到的就是checked(勾选或者未勾选，是bool值)

   ② 如果配置了input中的value属性

         1）v-model的初始值是非数组，收集到的checked（勾选或者未勾选，是bool值）

         2）v-model的初始值是数组，收集到的就是value组成的数组

      所以如果要使用多个复选框, 必须要保证两点

      1）每一项都要配置value

       2)  v-model的值要配置成数组的形式 

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

 (5) 下拉框：在select中配置v-model,在每一个option选项中配置value属性

<select v-model="usrInfo.city">
    <option value="">请选择校区</option>
    <option value="beijing">北京校区</option>
    <option value="shanghai">上海校区</option>
    <option value="shenzhen">深圳校区</option>
    <option value="wuhan">武汉校区</option>
</select>

如果要设置默认选中，在data中配置要选中的数据即可

  (6) 多行输入框：v-model收集到的就是输入的数据

<textarea v-model="usrInfo.other"></textarea>

（7）不需要收集value值的checkBox（只需要知道是否勾选）,可以不配置value属性

<input type="checkbox" v-model="usrInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>

（8）v-model 修饰符

• number ：输入字符串转为有效的数字

<input type="number" v-model.number="usrInfo.age">

  两层限制：

 第一层 type="number"，限制只能输入数字

 第二层 v-model.number 将输入的字符串直接转为数字

• lazy：失去焦点再收集数据(不是立即在开发者工具中更新，失去焦点之后更新)

<textarea v-model.lazy="usrInfo.other"></textarea>

• trim：首尾空格过滤, 只能去除首尾的空格，不能去除中间的空格

<input type="text" v-model.trim="usrInfo.account">