Form forms and form elements (input, select, textarea, etc.)

<template>
  <div class="profile">
    <form>
      <!-- label for="account" , When you click label when ,id="account" The elements of will focus  -->
      <label for="account"> account number ：</label>
      <input type="text" v-model="userInfo.account" id="account"/><br/><br/>

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

       Gender ：
      <label for="male"> male :</label>
      <!-- v-model.trim Remove the first space  -->
      <input type="radio" v-model.trim="userInfo.sex" value="male" name="sex" id="male"/>
      <label for="female"> Woman :</label>
      <input type="radio" v-model="userInfo.sex" value="female" name="sex" id="female"/><br/><br/>

      <label for="age"> Age ：</label>
      <!-- type="number"  control input You can only enter Numbers 、 Decimal point and e/E,+,-  etc. ; however value The type of value is still string;v-model.number Change the entered number to number type  -->
      <!--  therefore  type="number"  and  v-model.number To be used together  -->
      <!-- onkeyup="value=value.replace(/[^\d]/g, '')"  Can be controlled  input Decimal point and... Cannot be entered e/E,+,-  etc. , You can only enter Numbers ;-->
      <input type="number" v-model.number="userInfo.age" id="age" onkeyup="value=value.replace(/[^\d]/g, '')"/><br/><br/>

       hobby ：
      <label for="game"> Play the game </label>
      <input type="checkbox" v-model="userInfo.hobby" value="game" id="game"/>
      <label for="run"> running </label>
      <input type="checkbox" v-model="userInfo.hobby" value="run" id="run"/>
      <label for="eat"> having dinner </label>
      <input type="checkbox" v-model="userInfo.hobby" value="eat" id="eat"/><br/><br/>

       Campus ：
      <select v-model="userInfo.school">
        <option value=""> Please select Campus </option>
        <option value="beijing"> Beijing </option>
        <option value="shanghai"> Shanghai </option>
        <option value="hangzhou"> Hangzhou </option>
      </select><br/><br/>

      <!-- v-model.lazy  When you lose focus , And then put the latest value Value to userInfo.other -->
       Other information ：<textarea v-model.lazy="userInfo.other"></textarea><br/><br/>

      <input type="checkbox" v-model="userInfo.agreement"/> Read and accept <a href="http://www.baidu.com"> User agreement </a><br/><br/>
      
      <!-- form Medium button It has the default function of refreshing the page , So we need to use click.prevent -->
      <button @click.prevent="submit"> 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>