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 inputs = document.getElementsByTagName("input");
        for (let i = 0; i < inputs.length; i++) {
            const element = inputs[i];
            if (element.type === "text" || element.type === "radio" || element.type === "checkbox") {
                alert(element.value);
            }
        }
    }
</script>