Vue.js 表单数据绑定和获取示例

本示例展示了如何使用 Vue.js 进行表单数据绑定，并演示了如何通过 JavaScript 获取表单元素的值，并最终使用 alert 弹出框展示数据。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 表单数据绑定示例</title>
</head>

<body>
    <!--3 将模型数据和视图进行绑定-->
    <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" id="name" v-model="user.name"><br><br>

            年龄:<input type="text" id="age" 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" name="hobby">唱
            <input type="checkbox" value="dance" v-model="user.hobby" name="hobby">跳
            <input type="checkbox" value="basketball" v-model="user.hobby" name="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 name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var gender = document.querySelector('input[name="gender"]:checked').value;
            var hobby = [];
            var checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
            checkboxes.forEach(function(checkbox) {
                hobby.push(checkbox.value);
            });
            alert("姓名：" + name + "\n年龄：" + age + "\n性别：" + gender + "\n爱好：" + hobby.join(", "));
        }
    </script>

</body>

</html>

代码解析：

HTML 代码:
- 为姓名和年龄输入框添加了 id 属性，分别为 name 和 age，以便于在 JavaScript 中获取其值。
- 为所有爱好选择框添加了 name 属性，以便于在 JavaScript 中方便地获取所有选中的选项。
JavaScript 代码:
- 使用 document.getElementById() 获取 name 和 age 输入框的值。
- 使用 document.querySelector('input[name="gender"]:checked') 获取选中的性别值。
- 使用 document.querySelectorAll('input[name="hobby"]:checked') 获取所有选中的爱好选项，并将它们存储在一个数组中。
- 使用 alert() 函数将获取到的数据展示在弹出框中。

使用方法：

在网页中打开该示例代码。
在表单中输入姓名、年龄、选择性别和爱好。
点击 "保存" 按钮，弹出框将会显示你所输入的所有数据。

注意：

由于 JavaScript 代码中使用的是 alert() 函数，所以弹出框的样式可能与浏览器默认样式有所不同。
在实际应用中，你可以根据需要将获取到的数据发送到后端进行处理，或者使用其他方式进行展示。

本示例展示了如何使用 Vue.js 进行表单数据绑定，并演示了如何通过 JavaScript 获取表单元素的值。这只是 Vue.js 中数据绑定的一个简单示例，在实际应用中，你可以使用更多 Vue.js 的功能来构建更复杂的表单。