Vue.js 模型数据绑定：一次性展示用户输入数据

在 Vue.js 中，可以通过绑定模型数据的方式来实现一次性展示用户输入的数据。

在上述代码中，已经定义了一个 Vue 对象，并且将其绑定到 id 为 'app' 的元素上。在 Vue 对象的 data 属性中，定义了一个 user 对象，其中包含了用户输入的姓名、年龄、性别和爱好。在 HTML 中，使用双大括号 {{}} 语法来展示模型数据。

要一次性展示用户输入的数据，可以在保存按钮的点击事件中，使用 console.log() 函数来打印出用户输入的数据。修改代码如下：

<script>
    new Vue({
        el: '#app', //定义Vue控制的区域
        data: {
            user: {
                name: '', //姓名
                age: '',  //年龄
                gender: '', //性别
                hobby: []   //由于爱好可能存在多个,使用数组封装          
            }
        }
    });
    function print(){
        console.log('姓名：' + this.user.name);
        console.log('年龄：' + this.user.age);
        console.log('性别：' + this.user.gender);
        console.log('爱好：' + this.user.hobby.join(', '));
    }
</script>

在 print() 函数中，通过 this.user 来获取 Vue 对象中的 user 对象，并使用 console.log() 函数打印出用户输入的数据。其中，使用 join(', ') 方法将爱好数组转换为以逗号分隔的字符串。

然后，在保存按钮的 onclick 事件中调用 print() 函数：

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

这样，当用户点击保存按钮时，会将用户输入的数据打印到控制台中，实现一次性展示出用户输入的数据。