收集表单数据

使用v-model收集表单的数值，实现双向绑定，默认收集的就是value值，type为checkbox复选框的时候，默认收集的是布尔值，表示是否选中；

一、type类型

1、text文本框、password密码框

收集value值，用户输入即为value值；

账号：<input type="text" v-model="account">
密码：<input type="password" v-model="password">

2、radio单选框

收集到的是value值，要给标签属性设置value值

性别：
男<input type="radio" name="sex" value="male" v-model="sex">
女<input type="radio" name="sex" value="female" v-model="sex">

3、checkbox复选框

当未设置value值：

收集到的是多选框是否选中的布尔类型数值，即true或false

当设置value值：

（1）初始值为非数组类型：收集到的是布尔类型，true或false；

（2）初始值为数组类型：收集到的是value的值组成的数组；

爱好：
吃饭<input type="checkbox" v-model="hobby" value="eat">
睡觉<input type="checkbox" v-model="hobby" value="sleep">
打游戏<input type="checkbox" v-model="hobby" value="game">

new Vue({
        el:"#root",
        data:{
            //使用一个demoData存起来，方便输入整个表单数据,注意前面的数据调用的时候，也要在前面加一个demoData
            demoData:{
                numb:'',
                passw:'',
                age:18,
                sex:'',
                hobby:[], //注意：这里要写成数组形式
                school:'',
                order:'',
                agree:'' //这里只需要判断是否勾选，只需返回true或false
            }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.demoData))
            }
        }
})

 二、v-model上的修饰符

1、trim

收集到的数据自动去除字符串前后的空格；

2、lazy

当失去焦点的瞬间收集数据，而不会实时更新数据；

3、number

输入字符串转换为有效数字；

完整代码：

<div id="root">
        <!-- 实现点击‘账号’也可以获取焦点
        <label for="demo">账号：</label> 
        <input type="text" id="demo"> -->

        <!-- prevent用于阻止默认行为 -->
        <form @submit.prevent="demo"> 
            <!-- v-model.trim:实现去除字符串前后的空格，但是无法去除字符串中间的空格 -->
            账号：<input type="text" v-model.trim="demoData.numb"><br><br>
            密码：<input type="password" v-model="demoData.passw"><br><br>
            <!-- 这里的年龄设置了type类型为number，输入框就不能输入非数字，设置v-model.number修改该数值时就会转换为数字类型而不是字符串 -->
            年龄：<input type="number" v-model.number="demoData.age"><br><br>
            性别：
            男<input type="radio" name="sex" value="male" v-model="demoData.sex">
            女<input type="radio" name="sex" value="female" v-model="demoData.sex"><br><br>
            爱好：
            吃饭<input type="checkbox" v-model="demoData.hobby" value="eat">
            睡觉<input type="checkbox" v-model="demoData.hobby" value="sleep">
            打游戏<input type="checkbox" v-model="demoData.hobby" value="game"><br><br>
            所属校区：
            <select v-model="demoData.school">
                <option value="">请选择所在校区</option>
                <option value="shipai">石牌校区</option>
                <option value="daxuecheng">大学城校区</option>
                <option value="nanhai">南海校区</option>
                <option value="shanwei">汕尾校区</option>
            </select>
            <br><br>
            其他：
            <!-- 多行信息 -->
            <!-- lazy:在失去焦点的一瞬间再收集信息，而不是实时进行 -->
            <textarea v-model.lazy="demoData.order"></textarea> 
            <br><br>
            <input type="checkbox" v-model="demoData.agree">请您阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <br><br>
            <button>提交</button>
        </form>
</div>

new Vue({
        el:"#root",
        data:{
            //使用一个demoData存起来，方便输入整个表单数据,注意前面的数据调用的时候，也要在前面加一个demoData
            demoData:{
                numb:'',
                passw:'',
                age:18,
                sex:'',
                hobby:[], //注意：这里要写成数组形式
                school:'',
                order:'',
                agree:'' //这里只需要判断是否勾选，只需返回true或false
            }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.demoData))
            }
        }
})

运行结果：