Vue技术—收集表单数据

收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
    1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
    2.配置input的value属性：
        （1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
        （2）v-model的数是指是数据，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
    lazy：失去焦点再收集数据
    number：输入字符串转为有效的数字
    trim：输入首位空格过滤

<div id="root" >
    <form @submit.prevent="demo">
        <label>账号：<input type="text" v-model.trim="userinfo.name"></label><br><br>
        <label>密码：<input type="password" v-model="userinfo.password"></label><br><br>
        <label>年龄：<input type="number" v-model.number="userinfo.age"></label><br><br>
        性别：
        <label><input type="radio" v-model="userinfo.sex" value="no">保密</label>
        <label><input type="radio" v-model="userinfo.sex" value="man">男</label>
        <label><input type="radio" v-model="userinfo.sex" value="woman">女</label><br><br>
        爱好：
        <label><input type="checkbox" v-model="userinfo.hobby" value="game">打游戏</label>
        <label><input type="checkbox" v-model="userinfo.hobby" value="xuexi">学习</label>
        <label><input type="checkbox" v-model="userinfo.hobby" value="eat">吃饭</label><br><br>
        所在校区：
        <select v-model="userinfo.school">
            <option value="">请选择校区</option>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="tianjin">天津</option>
        </select><br><br>
        其他信息：
        <textarea v-model.lazy="userinfo.other"></textarea><br><br>
        <input type="checkbox" v-model="userinfo.agree">阅读并接受 <a href="www.baidu.com">用户协议</a><br><br>
        <button>提交</button>
    </form>
</div>

new Vue({
        el:'#root',
        data:{
           userinfo:{
               name:'',
               password:'',
               age:'',
               sex:'no',
               hobby:[],
               school:'shanghai',
               other:'',
               agree:''
           }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userinfo))
            }
        }
    })