搜索到
1
篇与
的结果
-
收集表单数据 <input type="text">，v-model收集的是value值，用户输入的就是value值；<input type="radio">，v-model收集的是value值，且要给标签配置value属性；<input type="checkbox">（1）如果没有配置input的value属性，那么收集的是checked（勾选/未勾选，布尔值）；（2）配置了input的value属性： a. v-model的初始值是非数组，那么收集的是checked（勾选/未勾选，布尔值）； b. 反之，初始值是数组，那么收集的就是value组成的数组注：v-model的三个修饰符：lazy：失去焦点再收集数据；number：输入字符串转为有效的数字；trim：输入首尾空格过滤<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit="demo"> <!-- <label for="demo">账号：</label> --> <!-- <input type="text" id="demo"> --> 账号：<input type="text" v-model.trim="userInfo.account"> <br><br> 密码：<input type="password" v-model="userInfo.password"> <br><br> 性别： 男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <br><br> 年龄：<input type="number" name="age" v-model.number="userInfo.age"> <br><br> 爱好： <input type="checkbox" value="eat" v-model="userInfo.hobby">吃饭 <input type="checkbox" value="sleep" v-model="userInfo.hobby">睡觉 <input type="checkbox" value="play" v-model="userInfo.hobby">打豆豆 <br><br> 所属校区： <select v-model="userInfo.city"> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> <br><br> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br><br> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a> <br> <button>提交</button> </form> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { userInfo: { account: '', password: '', sex: 'male', age: '', hobby: [], city: '', other: '', agree: '' } }, methods: { demo() { console.log(JSON.stringify(this.userInfo)) alert('提交成功') } } }) </script> </body> </html>
