表单form 和 表单元素（input、select、textarea等）

<template>
  <div class="profile">
    <form>
      <!-- label for="account" ，当点击label时，id="account"的元素会聚焦 -->
      <label for="account">账号：</label>
      <input type="text" v-model="userInfo.account" id="account"/><br/><br/>

      <label for="password">密码：</label>
      <input type="text" v-model="userInfo.password" id="password"/><br/><br/>

      性别：
      <label for="male">男:</label>
      <!-- v-model.trim去掉首位的空格 -->
      <input type="radio" v-model.trim="userInfo.sex" value="male" name="sex" id="male"/>
      <label for="female">女:</label>
      <input type="radio" v-model="userInfo.sex" value="female" name="sex" id="female"/><br/><br/>

      <label for="age">年龄：</label>
      <!-- type="number" 控制input只能输入数字、小数点和e/E，+，- 等;但是value值的类型依然是string；v-model.number将输入的数字转为number类型 -->
      <!-- 所以 type="number" 和 v-model.number要一起用 -->
      <!-- onkeyup="value=value.replace(/[^\d]/g, '')" 可以控制 input不能输入小数点和e/E，+，- 等，只能输入数字；-->
      <input type="number" v-model.number="userInfo.age" id="age" onkeyup="value=value.replace(/[^\d]/g, '')"/><br/><br/>

      爱好：
      <label for="game">打游戏</label>
      <input type="checkbox" v-model="userInfo.hobby" value="game" id="game"/>
      <label for="run">跑步</label>
      <input type="checkbox" v-model="userInfo.hobby" value="run" id="run"/>
      <label for="eat">吃饭</label>
      <input type="checkbox" v-model="userInfo.hobby" value="eat" id="eat"/><br/><br/>

      所属校区：
      <select v-model="userInfo.school">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="hangzhou">杭州</option>
      </select><br/><br/>

      <!-- v-model.lazy 失去焦点时，再把最新的value值给userInfo.other -->
      其他信息：<textarea v-model.lazy="userInfo.other"></textarea><br/><br/>

      <input type="checkbox" v-model="userInfo.agreement"/>阅读并接受<a href="http://www.baidu.com">用户协议</a><br/><br/>
      
      <!-- form中的button有刷新页面的默认功能，所以需要用click.prevent -->
      <button @click.prevent="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      userInfo: {
    
        account: '',
        password: '',
        sex: 'male',
        age: '',
        hobby: [],
        school: '',
        other: '',
        agreement: ''
      }
    }
  },
  methods: {
    
    submit() {
    
      console.log(this.userInfo);
    }
  }
}
</script>