current position:Home>The front-end Vue collects form data

The front-end Vue collects form data

2022-04-29 05:12:25A little rabbit who likes eating radishes

Collect form data ( Weight measurement v-model usage )

 Insert picture description here

<body>
  <!--  Containers  -->
  <div id="root">
    <form @submit.prevent="submitUserMsg">
      <label for="userAccount"> account number :</label>
      <input type="text" name="" id="userAccount" v-model.lazy.trim="userInfo.account">
      <br />
      <br />
      <label for="userPassword"> password :</label>
      <input type="text" name="" id="userPassword" autocomplete="off" v-model.lazy.trim="userInfo.password">
      <br />
      <br />
      <label for="sex"> Gender :</label>
       male <input type="radio" name="sex" v-model.lazy.trim="userInfo.sex" value="male">
       Woman <input type="radio" name="sex" v-model.lazy.trim="userInfo.sex" value="female">
      <br />
      <br />
       hobby :
       Study <input type="checkbox" value="learn" v-model="userInfo.hobby">
       Play the game <input type="checkbox" value="game" v-model="userInfo.hobby">
       having dinner <input type="checkbox" value="eat" v-model="userInfo.hobby">
      <br />
      <br />
       Campus 
      <select v-model="userInfo.city">
        <option value=""> Please select Campus </option>
        <option value="shanghai"> Shanghai </option>
        <option value="beijing"> Beijing </option>
        <option value="henan"> Henan </option>
        <option value="guangdong"> guangdong </option>
      </select>
      <br />
      <br />
       Other information :<br />
      <textarea v-model.lazy="userInfo.other"></textarea>
      <br />
      <br />
      <input type="checkbox" v-model="userInfo.agree"> Read and accept <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=39&spm_id_from=pageDriver" target="_blank">《 User agreement 》</a>
      <br />
      <button type="submit"> Submit </button>
    </form>
  </div>

  <script> Vue.config.productionTip = false; //  prevent  Vue  Production prompt generated at startup  new Vue({
       el: '#root', data() {
       return {
       userInfo: {
       account: '', password: '', sex: '', hobby: [], city: '', other: '', agree: '' } } }, methods: {
       submitUserMsg() {
       const myJson = JSON.stringify(this.userInfo) console.log(myJson) } } }) </script>

 Insert picture description here
Click Submit
 Insert picture description here

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446063.html

Random recommended