vue入门小案例（表单收集单页面）

最新推荐文章于 2024-05-06 18:26:57 发布

YCY866

最新推荐文章于 2024-05-06 18:26:57 发布

阅读量404

点赞数 15

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76478257/article/details/136921910

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实例

在Vue中创建一个表单收集页面，可以使用v-model来实现双向数据绑定，以便收集和处理用户输入的数据。以下是一个简单的示例，包含文本输入、选择框和单选按钮的表单页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Form Collection Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input,
        .form-group select,
        .form-group button {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>表单收集页面</h1>
        <form @submit.prevent="submitForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="formData.name" placeholder="请输入您的姓名">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" v-model="formData.email" placeholder="请输入您的邮箱">
            </div>
            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" v-model="formData.gender">
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label>爱好</label>
                <label><input type="checkbox" value="reading" v-model="formData.hobbies"> 阅读</label>
                <label><input type="checkbox" value="sports" v-model="formData.hobbies"> 运动</label>
                <label><input type="checkbox" value="music" v-model="formData.hobbies"> 音乐</label>
            </div>
            <div class="form-group">
                <button type="submit">提交</button>
            </div>
        </form>
        <div v-if="submitted">
            <h2>提交的数据：</h2>
            <p>姓名：{{ submitted.name }}</p>
            <p>邮箱：{{ submitted.email }}</p>
            <p>性别：{{ submitted.gender }}</p>
            <p>爱好：{{ submitted.hobbies.join(', ') }}</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                formData: {
                    name: '',
                    email: '',
                    gender: '',
                    hobbies: []
                },
                submitted: null
            },
            methods: {
                submitForm() {
                    this.submitted = {...this.formData};
                }
            }
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含姓名、邮箱、性别和爱好的表单。用户可以在表单中输入数据，并通过复选框选择多个爱好。当用户提交表单时，submitForm方法会被调用，将表单数据存储在submitted对象中，并显示提交的数据。

这个简单的示例展示了如何在Vue中创建一个表单收集页面。你可以根据需要扩展和修改这个示例，例如添加更多的输入字段、表单验证或使用Vue组件来构建更复杂的表单。