Vue收集表单数据学习笔记

收集表单数据

v-model双向数据绑定，收集的是input框的value，单选按钮不存在value，就像代码中的男女选项，即使绑定性别v-model=“sex”，控制台依然不能接收性别的值，因为没有value值，，想要接收数据需要在单选input框输入value来标记男女，后台会输出value。

多组的勾选框应该把初始数据写成数组，再添加v-model双向绑定hobby，给每个勾选的数据添加value值，最后收集的就是value组成的数组。

因为hobby初始值会影响v-model收集数据,如果不在实例里面你设置hobby为数组，那么无法获取数据指挥显示true和false。

<div id="form">
        <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="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /><br /><br />
            年龄：<input type="number" v-model.number="userInfo.age"><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="drive"><br /><br /><br />
            所属校区：<select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
                <option value="">杭州</option>
            </select>
            <br /><br /><br />
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br />
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="www.baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

所属校区v-model:,通过指定data里面city值来设置默认值。
接受协议里面只是勾选不需要value设置v-model就可以。

提交表单默认跳转事件(.prevent阻止默认行为)，表单提交设置form的submit的demo事件,data里面写demo

可以通过console.log(this._data)来输出页面中的数据，但是一般不在代码中直接操作_data,所以将data所有数据包裹在userInfo里面，页面中所有v-model都要添加userInfo来访问

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

总结

收集数据表单：
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1. 没有配置input的value值，那么收集的就是checked（勾选是true，未勾选为false）
2. 配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked（勾选是true，未勾选为false）
（2）v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：
        lazy：失去焦点再收集数据
        number：输入字符串转为有效的数字
        trim：输入首尾空格过滤

 lazy：失去焦点再收集数据
        number：输入字符串转为有效的数字
        trim：输入首尾空格过滤