Vue学习实例---用户注册

最新推荐文章于 2023-09-24 23:37:19 发布

献_

最新推荐文章于 2023-09-24 23:37:19 发布

阅读量409

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45726044/article/details/113819924

版权

简单用户注册

<!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>
  const 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>

在单页应用程序中，用户注册在提交时是使用Ajax来发送数据到服务端，数据格式采用JSON格式，而JSON是Javascript对象字面量语法的子集，在表单提交前，通常是要发送的数据先组织为一个Javascript对象或数组，然后转换为JSON字符串进行发送。

使用Vue.js，数据组织对象为对象的过程就变得异常简单了。可以使用v-model指令将输入控件直接绑定到某个对象的属性上，然后使用v-on指令绑定提交按钮的click事件，在事件处理函数直接发送该对象即可。

在这里插入图片描述

在提交按钮上，绑定click时使用了prevent修饰符

在这里插入图片描述
参考:
https://book.douban.com/subject/35019549/

献_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习实例---用户注册

简单用户注册<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用户注册</title></head><body><div id = "app"> <form> <table border="0"> <tr> <td>用户名:&l
复制链接

扫一扫