查看“Vue从入门到实战:实例 用户注册”的源代码
←
Vue从入门到实战:实例 用户注册
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
传统上,表单提交前,通常要把发送的数据先组织成一个Javascript对象或者数组,转化为JSON字符串,使用Ajax发送数据到服务端。 使用Vue,数据组织为对象的过程变得异常简单了。可以使用v-model指令将输入控件直接绑定到某个对象的属性上,然后使用v-on指令绑定提交按钮的click事件,在事件处理函数直接发送该对象即可。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <div id = "app"> <form> <table border="0"> <tr> <td>用户名:</td> <td> <input type="text" name="username" v-model="user.username"> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="password" v-model="user.password"> </td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="gender" value="1" v-model="user.gender">男 <input type="radio" name="gender" value="0" v-model="user.gender">女 </td> </tr> <tr> <td>邮件地址:</td> <td> <input type="text" name="email" v-model="user.email"> </td> </tr> <tr> <td>密码问题:</td> <td> <input type="text" name="pwdQuestion" v-model="user.pwdQuestion"> </td> </tr> <tr> <td>密码答案:</td> <td> <input type="text" name="pwdAnswer" v-model="user.pwdAnswer"> </td> </tr> <tr> <td> <input type="submit" value="注册" @click.prevent="register"> </td> <td><input type="reset" value="重填"></td> </tr> </table> </form> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { user: { username: '', password: '', gender: '', email: '', pwdQuestion: '', pwdAnswer: '' } }, methods: { register: function(){ //直接发送this.user对象 //... console.log(this.user); } } }); </script> </body> </html> </nowiki> 在提交按钮上,我们绑定的click事件时使用了prevent修饰符,这是因为本例并不希望表单的默认提交行为发生,因此使用prevent修饰符来阻止表单的默认提交行为。 浏览器console: <nowiki>email: "maxin5452@163.com" gender: "1" password: "000000" pwdAnswer: "123" pwdQuestion: "123" username: "20150815"</nowiki>
返回至
Vue从入门到实战:实例 用户注册
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息