收集表单数据 - 《Vue学习》

则v-model收集的是value值，用户输入的value值
则v-model收集的是value值，且要给标签配置value值
若
- 没有配置input的value值，那么收集的就是chencked（勾选or未勾选是布尔值）
- 配置input的value属性：
  - v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选布尔）
  - v-model的初始值是数组，那么收集的就是value组成的数组
v-model的三个修饰符
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字 //对于有非数字只转前一段
- trim：输入首尾空格过滤

<div id="app">
      <form method="get" @submit.prevent="getsubmit">
        <label for="account">账号</label>
        <input type="text" name="" id="account" v-model.trim="userInfo.account" /><br /> //trim去掉前后空格
        <label for="password">密码:</label>
        <input type="password" name="" id="password" v-model="userInfo.password" /><br />
        <span>性别：</span>
        <input type="radio" name="sex" id="" v-model="userInfo.sex" value="man" />男
        <input type="radio" name="sex" id="" v-model="userInfo.sex" value="miss"/>女<br />
        <span>爱好：</span>
        <input type="checkbox" name="" id="" v-model="userInfo.hobby" value="学习" />学习
        <input type="checkbox" name="" id="" v-model="userInfo.hobby" value="打游戏"/>打游戏
        <input type="checkbox" name="" id="" v-model="userInfo.hobby" value="吃饭"/>吃饭<br />
        <span>所属校区</span>
        <select name="" id="" v-model="userInfo.other">
          <option value="">选择校区</option>
          <option value="beijin">北京</option>
          <option value="shanghai">上海</option>
          <option value="wuhan">武汉</option>
        </select>
        <br />
        <span>其他信息</span>
        <textarea name="" id="" cols="30" rows="10" v-model="userInfo.text"></textarea>
        <input type="checkbox" name="" id="" v-model="userInfo.agree" />阅读同意协议
        <a href="ssss" >阅读</ >
        <button>提交</button>
      </form>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data() {
          return {
            userInfo: {
              account: "",
              password: "",
              sex: "miss",
              hobby: [],
              other: "",
              text: "",
              agree: false,
            },
          };
        },
        methods: {
          getsubmit() {
            alert("ss");
          },
        },
      });
    </script>