Vue.js 用户信息录入及展示示例 - 使用 v-model 实现双向绑定

<div id="app">
    <p>输入的姓 名是：{{user.name}}</p>
    <p>输入的年 龄是：{{user.age}}</p>
    <p>选择的性 别是：{{user.gender}}</p>
    <p>选择的爱 好是：{{user.hobby}}</p>
    <hr>
    <form action="">
        姓名:<input type="text" v-model="user.name"><br><br>
        年龄:<input type="text" v-model="user.age"><br><br>
        性别:<input type="radio" value="man" v-model="user.gender">男
        <input type="radio" value="woman" v-model="user.gender">女<br><br>
        爱好:<input type="checkbox" value="sing" v-model="user.hobby">唱
        <input type="checkbox" value="dance" v-model="user.hobby">跳
        <input type="checkbox" value="basketball" v-model="user.hobby">篮球<br><br>
        <input type="button" id="btn" value="保存" onclick="print()">
    </form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                name: "",
                age: "",
                gender: "",
                hobby: []
            }
        }
    });
    function print() {
        alert('姓名：' + app.user.name);
        alert('年龄：' + app.user.age);
        alert('性别：' + app.user.gender);
        alert('爱好：' + app.user.hobby.join(', '));
    }
</script>