lovecoding
/
VIP20


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 实现注册功能 -->
      <!-- v-model 可以实现 数据 与 表单输入域 的 双向绑定 -->
      <form @submit.prevent="onSubmit">
        <div class="form-item">
          <label
            >账号：<input
              type="text"
              placeholder="请输入账号..."
              v-model="formModel.account"
              required
          /></label>
        </div>
        <div class="form-item">
          <!-- :value="formModel.password"
              @input="formModel.password=$event.target.value" -->
          <label
            >密码：<input
              type="password"
              placeholder="请输入密码..."
              v-model="formModel.password"
              required
          /></label>
        </div>
        <div class="form-item">
          <label
            >确认：<input
              type="password"
              placeholder="请再次输入密码..."
              v-model="formModel.repasswd"
              required
          /></label>
        </div>
        <div class="form-item">
          <label
            >性别：
            <select v-model="formModel.sex">
              <option value="">请选择性别...</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </label>
        </div>
        <div class="form-item">
          <label
            >爱好：
            <input type="checkbox" value="篮球" v-model="formModel.hobby" />篮球
            <input type="checkbox" value="足球" v-model="formModel.hobby" />足球
            <input type="checkbox" value="乒乓" v-model="formModel.hobby" />乒乓
          </label>
        </div>
        <div class="form-item">
          <button>注册</button>
        </div>
      </form>
    </div>
    <script>
      var vm = new Vue({
        data: {
          // 表单的数据模型
          formModel: {
            account: '',
            password: '',
            repasswd: '',
            sex: '',
            hobby: [],
          },
          // ...
        },
        methods: {
          onSubmit(ev) {
            // ev.preventDefault(); // 阻止表单的默认提交行为
            // 上面代码 可以通过 事件的prevent修饰符来完成

            let { account, password, repasswd } = this.formModel;
            // 如果用户两次录入的密码一致，就将账号和密码 打印到 控制台上
            if (password === repasswd) {
              console.log(`您注册的账号：${account},密码：${password}`);
            } else {
              alert('两次密码不一致');
            }
          },
        },
      }).$mount('#app');
    </script>
  </body>
</html>