【Vue-day3】收集表单数据

        若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

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

        若：输入需要控制为Number类型，则页面和Vue都设置为number。

 年纪：<input type="number" v-model.number="age">

        若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

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

        若：<input type="checkbox"/>

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

<input type="checkbox" v-model="isAccpeted">阅读并接收《<a href="www.baidu.com">用户协议</a>》

2.配置input的value属性:
        (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
        (2)v-model的初始值是数组，那么收集的的就是value组成的数组

爱好：
<input type="checkbox" value="paly game" v-model="hobby">打游戏
<input type="checkbox" value="study" v-model="hobby">学习

<script>
    const vm = new Vue({
        el: "#root",
        data: {
            hobby: []
        }
    });
</script>

  若：<button>提交</button>

        提交data中的数据可用this._data

methods: {
            submit: function () {
                console.log(JSON.stringify(this._data));
            }
        }

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

节选自：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili