1. 收集表单数据

  1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  3. 若：<input type="checkbox"/>
    (1) 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    (2) 配置input的value属性:
  • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  • v-model的初始值是数组，那么收集的的就是value组成的数组

备注：
v-model的三个修饰符：

  • lazy：失去焦点再收集数据
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格过滤
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8" />
      <title>收集表单数据</title>
      <script type="text/javascript" src="../js/vue.js"></script>
     </head>
     <body>
      <!-- 准备好一个容器-->
      <div id="root">
       <form @submit.prevent="demo">
        <!-- v-model.trim去除前后的空格 -->
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        密码：<input type="password" v-model="userInfo.password"> <br/><br/>
        年龄：<input type="number" v-model.number="userInfo.age">
         <!-- type = "number"控制输入框只能输入数字,v-model.number将收集到的年龄转换为number类型 -->
         <br/><br/>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
        爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
        <br/><br/>
        所属校区
        <select v-model="userInfo.city">
         <option value="">请选择校区</option>
         <option value="beijing">北京</option>
         <option value="shanghai">上海</option>
         <option value="shenzhen">深圳</option>
         <option value="wuhan">武汉</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
        <button>提交</button>
       </form>
      </div>
     </body>

     <script type="text/javascript">
      Vue.config.productionTip = false

      new Vue({
       el:'#root',
       data:{
        userInfo:{
         account:'',
         password:'',
         age:18,
         sex:'female',
         hobby:[],
         city:'beijing',
         other:'',
         agree:''
        }
       },
       methods: {
        demo(){
         //console.log(JSON.stringify(this._data)) 控制台打印表单信息，并转为JSON格式，但是一般不直接访问_data，而是用下面这种方式。
         console.log(JSON.stringify(this.userInfo))
        }
       }
      })
     </script>
    </html>
    运行结果：