Vue之表单数据的收集

若 input type=“text” 则v-model收集的是value值，用户输入的就是value值

若 input type=“radio” 则v-model收集的是value值，且要给标签配置value值

若 input type=“checkbox”

​ 1.没有配置value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ 2.配置input框的value属性：

​ （1）v-moel的初始值是费数组，那么收集的就是checked

​ （2）v-model的初始值是数组，那么收集的是value组成的数组

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

1. lazy： 失去焦点再收集数据
2. number：输入字符串转为有效数字
3. trim：输入首位空格过滤

案例如下：

<!-- 对于这些不能输入的单选框与多选框，我们vue可以给他来一个 vlaue值 -->
    <div id="root" @submit.prevent="demo()">
        <!-- 为表单注册一个事件，当表单提交的时候，用demo方法拿到表单数据，然后阻止跳转的默认行为 -->
        <form action="#">
            <!-- 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表示拿到的数据是数字类型的 -->
            性别: 
            <label for="male">男</label>
            <input type="radio" id="male" v-model:name="userInfo.gender" value="male">
            <label for="female">女</label>
            <input type="radio" id="female" v-model:name="userInfo.gender" value="female"><br><br>
            爱好: 
            魔方<input type="checkbox"   value="rubik" v-model="userInfo.hobby">
            敲代码<input type="checkbox" value="code" v-model="userInfo.hobby">
            打王者<input type="checkbox" value="game" v-model="userInfo.hobby"><br><br>
            <select name="" id="" v-model="userInfo.city">
                <option value="" selected>请选择校区</option>
                <option value="BeiJin">北京</option>
                <option value="ShangHai">上海</option>
                <option value="GuangZhou">广州</option>
                <option value="HuBei">湖北</option>
            </select>
            <br><br>
            其他信息:
            <textarea name="" id="" cols="30" rows="5" v-model.lazy="userInfo.other" placeholder="请输入其他信息">
                <!-- 不需要实时收集这个数据，因为这个文本域要写很长的东西，所以v-model.lazy 表示
                文本域 失去焦点的时候才收集数据 -->
            </textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com/">《用户协议》</a>
            <button>提交</button>
        </form>
        
    </div>
    <script src="./vue.js"></script>
        <script>
            const vm = new Vue({
                el:'#root',
                data:{
                    userInfo:{
                        account:"",
                        password:"",
                        age:"",
                        gender:"male",
                        hobby:[],
                        city:"",
                        other:"",
                        agree:false,
                    }
                },
                methods: {
                    demo(){
                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>

效果如下：