收集表单数据

示例：

  1. <body>
  2.     <div id="app">
  3.         <form @submit.prevent="registUser">
  4.             账号：<input type="text" v-model.trim="account"><br>
  5.             密码：<input type="password" v-model="password"><br>
  6.             年龄：<input type="number" v-model.number="age"><br>
  7.             性别：
  8.             男<input type="radio" name="sex" value="male" v-model="sex">
  9.             女<input type="radio" name="sex" value="female" v-model="sex"><br>
  10.             爱好：
  11.             学习<input type="checkbox" name="hobby" v-model="hobby" value="study">
  12.             打游戏<input type="checkbox" name="hobby" v-model="hobby" value="playGame">
  13.             吃饭<input type="checkbox" name="hobby" v-model="hobby" value="eat">
  14.             <br>
  15.             地址：
  16.             <select v-model="city">
  17.                 <option value="">---请选择---</option>
  18.                 <option value="bj">北京</option>
  19.                 <option value="wh">武汉</option>
  20.                 <option value="zz">郑州</option>
  21.                 <option value="sz">深圳</option>
  22.             </select>
  23.             <br>
  24.             其他信息：
  25.             <textarea v-model.lazy="other"></textarea>
  26.             <br>
  27.             <input type="checkbox" v-model="agree"> 阅读并接受<a href="https://www.baidu.com">《用户协议》</a> 
  28.             <br>
  29.             <button>提交</button>
  30.         </form>
  31.     </div>
  32. </body>
  33. <script>
  34.     Vue.config.productionTip = false;
  35.     const vm = new Vue({
  36.         el: '#app',
  37.         data: {
  38.             account: '',
  39.             password: '',
  40.             age: '',
  41.             sex: 'female',
  42.             hobby: [],
  43.             city: '',
  44.             other: '',
  45.             agree: ''
  46.         },
  47.         methods: {
  48.             registUser() {
  49.                 console.log(JSON.stringify(this._data));
  50.             }
  51.         }
  52.     });
  53. </script>

如果是<input type='text' />，则v-model收集的是value值，用户输入的就是value值。

如果是<input type='radio' />，则v-model收集的是value值，需要给标签配置value属性。

如果是<input type='checkbox' />，会有不同情况：

  1. 如果没有配置value属性，那么收集的就是checked（这一组复选框是否勾选，是布尔值）

  2. 如果设置了value属性，根据v-model绑定的变量的初始值不同而有不同的结果：

    1. v-model绑定变量的初始值是字符串或布尔等非数组类型，那么收集的就是checked
    2. v-model绑定变量的初始值是数组，那么收集的就是value组成的数组

v-model有三个修饰符：

  • .lazy：输入框失去焦点时，vue才会收集输入的数据
  • .number：输入的字符串转换为有效的数字
  • .trim：去除首位空格