【Vue】v-model收集表单数据

收集表单数据:

若: <input type=‘text’/>,则v-model收集的事vlaue值,用户输入的就是value值.

 <label for="username">账号:</label>
 <input type="text" id="username" v-model.trim="account" />

若: <input type=‘radio’/>,则v-model收集的是vlaue值,且要给标签配置value值.

 性别:<br />
 <label for="sex0">男</label>
  <input type="radio" name="sex" id="sex0" v-model="sex" value="male" />
 <label for="sex1">女</label>
  <input type="radio" name="sex" id="sex1" v-model="sex" value="female" />

若: <input type=‘checkbox’/>

1. 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2. 配置input的value属性:
   (1)v-model 的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
   (2)v-model 的初始值是数组,那么收集的就是value组成的数组

//初始值非数组
	hobby:'',
//初始值数组
	hobby: [], 

v-model的三个修饰符:

• v-model.lazy 失去焦点时才收集数据(常用于多行文本框)
• v-model.number 输入字符串转为有效的数字 (常与input框搭配使用)

<label for=