Vue2第八节 收集表单数据

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

    用户输入的就是value值

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

 （3）radio类型

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

男
女

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

 

 （4）checkBox类型

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

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

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

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

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

      1）每一项都要配置value

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

学习
吃饭
打游戏

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

    请选择校区
    北京校区
    上海校区
    深圳校区
    武汉校区

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

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

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

阅读并接受《用户协议》

（8）v-model 修饰符

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

  两层限制：

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

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

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

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