1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>收集表单</title>
    6. </head>
    7. <body>
    9. <form action="">
    11.     账户:<input type="text" name="username" > <br><br>
    12.     密码:<input type="password" name="password"> <br><br>
    14.     <!--单选框-->
    15.     性别:<div>
    17.     男<input type="radio" name="sex" value="female">
    18.     女<input type="radio" name="sex" value="male">
    20.     </div>
    21.     <br>
    23.     <!--多选框-->
    24.     爱好
    25.     <div>
    26.         抽烟<input type="checkbox" name="hobby" value="smoke">
    27.         喝酒<input type="checkbox" name="hobby" value="drink">
    28.         吃饭<input type="checkbox" name="hobby" value="eat">
    30.     </div>
    32.     <br>
    33.     <!--下拉框-->
    34.     所属校区
    35.     <select name="school">
    36.         <option value="qh">清华</option>
    37.         <option value="bd">北大</option>
    38.         <option value="sjz">河北地质大学</option>
    39.     </select>
    40.     <br>
    42.     <!--    多行输入-->
    43.     <div>
    44.         其他信息 <br>
    45.         <textarea name="others" id="" cols="30" rows="10"></textarea>
    46.     </div>
    49.     <input type="checkbox" name="ack">阅读并接受 <a href="http://www.baidu.com">《用户协议》</a>
    50.     <button> 提交</button>
    51. </form>
    54. </body>    
    55. </html>

    我们该如何使用v-model来识别表单数据呢？
    通过以上手段我们就可以获取到表单输入v-model
    但是怎么提交呢？我们可以给表格增加一个方法
    @submit.prevent=“tijiao”
    使用.prevent 防止提交之后跳转

    前面半段：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <form action="" @submit.prevent="tijiao">

            账户:<input type="text" name="username" v-model="username" > <br><br>
            密码:<input type="password" name="password" v-model="password"> <br><br>

            <!--单选框-->
            性别:<div>

            男<input type="radio" name="sex"  v-model="sex" value="female">
            女<input type="radio" name="sex"  v-model="sex" value="male">
        </div>
            <br>
            <!--多选框-->
            爱好
            <div>
                抽烟<input type="checkbox" name="hobby" value="smoke" v-model="hobby">
                喝酒<input type="checkbox" name="hobby" value="drink" v-model="hobby">
                吃饭<input type="checkbox" name="hobby" value="eat" v-model="hobby">
            </div>
            <br>
            <!--下拉框-->
            所属校区
            <select name="school" v-model="city">
                <option value="qh">清华</option>
                <option value="bd">北大</option>
                <option value="sjz">河北地质大学</option>
            </select>
            <br>
            <!--    多行输入-->
            <div>
                其他信息 <br>
                <textarea name="others" id="" cols="30" rows="10" v-model="message"></textarea>
            </div>
            <input type="checkbox" name="ack" v-model="ack">阅读并接受 <a href="http://www.baidu.com">《用户协议》</a>
            <button> 提交</button>
        </form>
    </div>

    后半段:

    <script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            username:'',
            password:'',
            sex:'',
            hobby: [],
            city: 'bj',
            message:"我是默认值",
            ack:"true",

        },
        methods: {
            tijiao(){

                console.log(JSON.stringify(this._data))
            }
        }
    })
</script>
</body>
</html>

    其实我们不应该这样用this._data
    因为
    有下划线，所以我们应该将data的方式改一下
    改为：
    image.png