Vue 中收集表单内容

vue中收集表单内容我们使用 v-model 指令，默认收集表单的value值

一、input 框

v-model与input框绑定默认绑定的是input 的value 值,用户输入的就是value值。

//简写
<input type="text" v-model="userName">
//完整写法

<input type="text" v-model:value="userName">

二、radio单选

最常用的就是性别选项框，男或者女，如果是一组，那么使用 v-model 绑定一个一样的值，value写不同的值

男<input type="radio" name="sex" v-model="sex" value="男">
女<input type="radio" name="sex" v-model="sex" value="女"> 

三、checkbox多选或单个选项

如果 checkbox中没有写value值，那么v-model收集的是 checked 的bool值，勾选为true，不勾选为false
如果写了value值，收集的就是value值的数组
vue data 中的初始值会影响收集的数据类型，如果绑定checked 可以用字符串，如果是value值，可以用数组
1、爱好多选

  学习<input type="checkbox" v-model="hobby" value="study">
  睡觉<input type="checkbox" v-model="hobby" value="sleep">
  吃饭<input type="checkbox" v-model="hobby" value="eat">
//数据类型是数组
        data:{
               hobby:[]
             }

2、是否选中，单选

<input type="checkbox" v-model="agree">
//数据类型是字符串
    data:{
               hobby:''
             }

四、下拉单选框

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

五、小结：

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