收集表单数据

当input的type为text时：v-model收集的是value，即用户输入的value值
当input的type为radio时：v-model收集的是value，此时需用户手动配置value
当input的type为checkbox时：
1. 未配置value时：此时收集的是checked值，为布尔类型
2. 配置value时
  1. v-model初始值为非数组时：收集的是checked值，为布尔类型
  2. v-model初始值为数组时：收集的是value组成的数组

v-model的三个修饰符：

.lazy：失去焦点后进行数据收集
.number：输入字符串为有效数字
.trim：输入过滤首尾空格

form中button，默认点击提交表单内容并刷新表单

      <form @submit.prevent="demo">
        <p>
          <label for="account">账号：</label>
          <input type="text" id="account" v-model="submitForm.account" />
        </p>
        <p>
          <label for="pwd">密码：</label>
          <input type="password" id="pwd" autocomplete v-model="submitForm.password" />
        </p>
        <p>
          性别：
          男<input
            type="radio"
            name="gender"
            value="male"
            v-model="submitForm.sex"
          />
          女<input
            type="radio"
            name="gender"
            value="famale"
            v-model="submitForm.sex"
          />
        </p>
        <p>
         爱好：
          <input type="checkbox" v-model="submitForm.hobby" value="books" />读书
          <input type="checkbox" v-model="submitForm.hobby" value="newspaper" />看报
          <input type="checkbox" v-model="submitForm.hobby" value="sleep" />睡觉
        </p>
        <p>
          <label for="school">所属校区：</label>
          <select id="school" v-model="submitForm.school">
            <option value="请选择校区">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
          </select>
        </p>
        <p>
          <label for="other">其他信息：</label>
          <textarea id="other" cols="30" rows="10" v-model.lazy="submitForm.other"></textarea>
        </p>
        <p>
          <input type="checkbox" id="accept" v-model="submitForm.accept" />阅读并接受<a
            href="http://www.jd.com"
            target="_blank"
            rel="noopener noreferrer"
            >《用户协议》</a
          >
        </p>
        <p>
          <button>注册</button>
        </p>
      </form>

Vue 收集表单数据（Day14）

收集表单数据