1、Vue中实现表单数据的收集

1.1 基础知识

表单中常用的标签：input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)

收集表单数据：

若：<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：输入首尾空格过滤

1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <form @submit.prevent="submit">
            账号：<input type="text" v-model.trim="UserInfo.account" /><br /><br />
            姓名：<input type="text" v-model="UserInfo.name"><br /><br />
            密码：<input type="password" v-mode="UserInfo.password"><br /><br />
            年龄: <input type="number" v-mode="UserInfo.age"><br /><br />
            性别：
            男<input type="radio" name='sex' v-model="UserInfo.sex" value="man">
            女 <input type="radio" name="sex" v-model="UserInfo.sex" value="female">

            爱好：
            学习:<input type="checkbox" v-model="UserInfo.hobby" value="study">
            打游戏:<input type="checkbox" v-model="UserInfo.hobby" value="playgame">
            干饭：<input type="checkbox" v-model="UserInfo.hobby" value="eat"> <br /><br />

            所在城市:
            <select v-model="UserInfo.city">
                <option value="">请选择城市</option>
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="zhengzhou">郑州</option>
            </select>
            <br /><br />
            备注：
            <textarea v-model="UserInfo.other"></textarea><br /><br />
            <input type="checkbox" v-model="UserInfo.agree">阅读并接收<a href="http://www.baidu.com"></a>
            <button>提交</button>

        </form>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue",
                UserInfo: {
                    account: '',
                    name: '',
                    password: '',
                    age: 18,
                    sex: 'man',
                    hobby: [],
                    city: 'shanghai',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                submit() {
                    console.log(JSON.stringify(this.UserInfo))

                }
            },
        })
    </script>

</body>

</html>