收集表单数据

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的三个修饰符：

（1）lazy：失去焦点再收集数据

（2）number：输入字符串转为有效的数字

（3）trim：输入守卫空格过滤

案例演示：（使用上面的内容）

    <body>

    <div id="root">
      <form @submit.prevent = "demo">
        帐号：<input type="text" v-model.trim = "userInfo.account" /> <br /> <br />
        密码：<input type="password" v-model = "userInfo.password" /> <br /> <br />
        年龄：<input type="number" v-model = "userInfo.age" /> <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="hangzhou">杭州</option>
        </select>
        <br /><br />

        其他信息：
        <textarea v-model.lazy = "userInfo.other"></textarea> <br /><br />
        <input type="checkbox" v-model="userInfo.agree">阅读并接受
        <a href = "https://www.baidu.com">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
      el: '#root',
      data:{
        userInfo: {
          account: '',
          password: '',
          age: 18,
          sex: 'female',
          hobby: [],
          city:'beijing',
          other: '',
          agree: '',
        }
      },
      methods: {
        demo(){
          //JSON.stringify()与JSON.parse()
          console.log(JSON.stringify(this.userInfo))
        }
      }
    })
  </script>

效果：

补充：JSON.stringify()与JSON.parse()

（1）JSON.stringify()可以将js中的对象转换为JSON字符串；

（2）JSON.parse()可以将JSON字符串转换为js的对象，这里字符串必须符合JSON的格式，比如let studentInfo = '["张三","19"]'

Vue2--收集表单数据

收集表单数据