14_收集表单数据

2021-11-01 23:35:41 阅读：142 来源： 互联网

总结:

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

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

注意：由于的单选项所以要给单选项赋同样的name值；

3. 若：<input type="checkbox">,

1.没有配置input的value属性，那么收集的就是checked(勾选或者未勾选，是布尔值)

2.配置input的value属性：（1）v-model的初始值是非数组，那么收集的就是checked(勾选或者未勾选，是布尔值)（效果同上） (2) v-model的初始值是数组，那么收集的就是value组成的数组

4.v-model的三个修饰符：

lazy:等失去焦点再收集数据 number:输入了字符串转为有效的数字 trim:输入时过滤首尾的空格

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>收集表单数据</title>
 8     <script type="text/javascript" src="../js/vue.js"></script>
 9 </head>
10 <body>
11     <!-- 准备好一个容器 -->
12     <div id="root">
13         <form @submit.prevent="demo">
14             账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
15             密码：<input type="password" v-model="userInfo.password"> <br/><br/>
16             年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
17             性别：
18             <input type="radio" name="sex" v-model='userInfo.sex' value="male">男
19             <input type="radio" name="sex" v-model='userInfo.sex' value="female">女 <br/><br/>
20             爱好：
21             <input type="checkbox" v-model='userInfo.hobby' value="sport">运动
22             <input type="checkbox" v-model='userInfo.hobby' value="game">打游戏
23             <input type="checkbox" v-model='userInfo.hobby' value="sleep">睡觉<br/><br/>
24             所属校区:
25             <select v-model="userInfo.city">
26                 <option value=""> 请选择校区</option>
27                 <option value="bj">北京</option>
28                 <option value="sz">深圳</option>
29                 <option value="gz">广州</option>
30             </select>
31             <br/><br/>
32             其他信息：
33             <textarea v-model.lazy='userInfo.other'></textarea><br/><br/>
34             <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br/><br/>
35             <button> 提交</button>
36         </form>
37     </div>    
38 </body>
39 <script type="text/javascript">
40     Vue.config.productionTips = false   //阻止vue在启动时生成生产提示
41     new Vue({
42         el:'#root',
43         data:{
44            userInfo:{
45               account:'',
46               password:'',
47               age:'',
48               sex:'female',
49               hobby:[],
50               city:'bj',
51               agree:''
52            }
53         },
54         methods: {
55             demo(){
56                 console.log(JSON.stringify(this.userInfo))
57             }
58         },
59         
60     })  
61 </script>
62 </html>

标签：14,收集,初始值,value,表单,勾选,数组,model
来源： https://www.cnblogs.com/lmy569/p/15496685.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

14_收集表单数据