Vue.js 模型数据绑定与数据获取 - 实践教程

输入的姓 名是：{{user.name}}

输入的年 龄是：{{user.age}}

选择的性 别是：{{user.gender}}

选择的爱 好是：{{user.hobby}}

    <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" value="sing" v-model="user.hobby">跳
        <input type="checkbox" value="basketball" value="sing" v-model="user.hobby">篮球<br><br>

        <input type="button" id="btn" value="保存" onclick="print()">

    </form>
</div>

<!--1 引入js文件-->
<script src="js/vue copy.js"></script>

<!--2 定义Vue对象，初始化模型数据-->
<script>
    new Vue({
        el: "#app", //定义Vue控制的区域
        data: {
            user: {
                name: "", //姓名
                age: "",  //年龄
                gender: "", //性别
                hobby: []   //由于爱好可能存在多个,使用数组封装          
            }
        }
    });
    function print(){
        var user = document.getElementById("app").__vue__.user;
        alert("姓名：" + user.name);
        alert("年龄：" + user.age);
        alert("性别：" + user.gender);
        alert("爱好：" + user.hobby.join(", "));
    }
</script>

问题出在print函数中的for循环中。你正在尝试遍历一个只有一个元素的dom节点，而不是遍历模型数据中的hobby数组。

修改print函数如下：

function print(){
    var user = document.getElementById("app").__vue__.user;
    alert("姓名：" + user.name);
    alert("年龄：" + user.age);
    alert("性别：" + user.gender);
    alert("爱好：" + user.hobby.join(", "));
}

这样就可以正确地弹出用户录入的数据了。