Vue收集表单数据

vue收集表单数据

1. 若 <input type="text"/>,则v-model收集的是value值。用户输入的就是value值

2. 若<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值

3. 若<input type="checkbox"/>
   3.1 没有配置input的value属性，那么收集的就是checked（勾选或者未勾选，是bool值）
   3.2 配置input的value属性：

     3.1.1 v-model的初始值是非数组，那么收集的就是checked（勾选或者未勾选，是bool值）  
     3.1.2 v-model的初始值是数组，那么收集的就是value组成的数组
     
     备注： v-model的三个修饰符：
           1. lazy： 失去焦点再收集数据
           2. number：输入字符串转化为有效的数字
           3. trim：输入首尾空格过滤
           
   

代码如下：

1.值的收集与绑定

<!-- account 收集value值 -->
账号：<input type="text" placeholder="请输入账号" v-model="account"/>

<!-- type='radio' 需要配置value值 sex收集的是value值-->
性别:<label for="nan">男</label><input type="radio" id="sex" value="男" name="sex" v-model="sex" />
<label for="nv">女</label><input type="radio" id="sex" value="女" name="sex" v-model="sex" />


<!-- type='checkbox' 不配置value值 agree收集的是checked值（bool） -->
<input type="checkbox" v-model="agree" />阅读并接受<a href="#">用户协议</a>


<!-- type='checkbox' 配置value值 -->
<!-- 如果hobby初始化为字符串，则hobby收集的是checked值（bool）-->
<!-- 如果hobby初始化为数组，则hobby收集的是value组成的数组["学习", "打游戏"] -->
爱好:<label for="study">学习</label><input type="checkbox" id="study" value="学习" v-model="hobby" />
<label for="game">打游戏</label><input type="checkbox" id="game" value="打游戏" v-model="hobby" />
<label for="eat">吃饭</label><input type="checkbox" id="eat" value="吃饭" v-model="hobby" />

2.修饰符

<!-- trim 用来过滤首尾空格 -->
账号：<input type="text" placeholder="请输入账号" v-model.trim="account"/>


<!-- number用来截取有效数字 -->
年龄：<input type="number" placeholder="请输入年龄" v-model.number="age"/>


<!-- lazy用来优化获取数据时机 在市区焦点时获取value值 -->
其他信息：<textarea v-model.lazy="other"></textarea>