一、双向绑定（v-model）

App.vue：

<template>
    <div>
        <input type="text" v-model="message">
        <h1>{{message}}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: "",
        };
    },
};
</script>

通过 v-model="message"  ，将input的变化，绑定到message的变化。

效果：

二、表单的提交（控制台获取数据）

App.vue：

<template>
    <div>
        <!-- .prevent：取消表单的默认行为（因为会跳转页面） -->
        <form @submit.prevent="postData">
            <input type="text" v-model="message">
            <button >提交表单</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: "",
        };
    },
    methods: {
        postData() {
            console.log(this.message);
        },
    },
};
</script>

效果：

三、表单提交案例 

App.vue：

<template>
    <div>
        <!-- .prevent：取消表单的默认行为 -->
        <form @submit.prevent="postData">
            <div>
                <label for="">用户名：</label>
                <input type="text" v-model="user.username">
            </div>
            <div>
                <label for="">密码：</label>
                <input type="password" v-model="user.password">
            </div>
            <div>
                <label for="">爱好：</label>
                <select name="" id="" v-model="user.hobby">
                    <option value="basketball">篮球</option>
                    <option value="football">足球</option>
                </select>
            </div>
            <div>
                <label for="">性别：</label>
                <label for="">男</label>
                <input type="radio" v-model="user.sex" value="boy">
                <label for="">女</label>
                <input type="radio" v-model="user.sex" value="girl">
            </div>
            <div>
                <label for="">技能：</label>
                <label for="">前端</label>
                <input type="checkbox" v-model="user.skill" value="前端">
                <label for="">java</label>
                <input type="checkbox" v-model="user.skill" value="java">
                <label for="">php</label>
                <input type="checkbox" v-model="user.skill" value="php">
            </div>
            <button>提交表单</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                username: "",
                password: "",
                hobby: "",
                sex: "",
                skill: [],
            },
        };
    },
    methods: {
        postData() {
            console.log(this.user);
        },
    },
};
</script>

效果：

通过value=“”，来设置传给控制台的数据。