Vue.js 实战：从零开始构建一个完整的市场调研问卷页面 初学者必看！使用 Vue.js 搭建交互式表单，问卷调查系统实例 Vue.js 表单设计：从构建到提交，全面解锁表单验证与结果展示技巧

编程语言 2024-11-01 18:10
0 阅读

效果图

在这里插入图片描述

博客教程：用 Vue.js 构建市场问卷调查页面

目录：
  1. 项目简介
  2. 环境准备
  3. 项目结构和基本布局
  4. 实现单选、多选和文本输入
  5. 表单验证与提交
  6. 结果预览功能实现
  7. 完整代码展示
  8. 总结

1. 项目简介

本教程将教你如何使用 Vue.js 构建一个简单的市场问卷调查页面。页面支持单选、多选题、文本输入，用户可以填写问卷并在提交后查看结果。我们会逐步实现每个功能，并确保问卷的用户体验和表单验证功能。

2. 环境准备

首先，确保你已经安装并准备好使用以下工具：

  • 代码编辑器：推荐使用 VS Code、Sublime Text 或其他熟悉的编辑器。
  • 浏览器：任何现代浏览器都可以运行 Vue.js 项目。
  • Vue.js 引入：我们使用 CDN 的方式引入 Vue.js，无需安装其他开发工具。

你可以直接通过以下链接引入 Vue.js：

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>

3. 项目结构和基本布局

接下来，我们需要创建一个 HTML 文件，并引入 Vue.js。项目的基本结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市场问卷调查</title>
    <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 问卷内容放置于此 -->
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      // 问卷数据
    },
    methods: {
      
      
      // 表单提交方法
    }
  });
</script>
</body>
</html>

我们会在 #app 的 div 中编写问卷页面的具体内容。

4. 实现单选、多选和文本输入

单选题

我们使用 Vue.js 的 v-model 实现单选题。每个选项使用 input type="radio" 实现，并通过 v-model 将用户选择的数据绑定到 data 中。

<div class="question">
    <div class="question-title">1. 您使用番茄小说APP有多久了？</div>
    <div class="options">
        <input type="radio" id="recent" value="最近两周才下载" v-model="answers.usageDuration">
        <label class="option" for="recent">最近两周才下载</label>
        <input type="radio" id="month" value="下载超过一个月了" v-model="answers.usageDuration">
        <label class="option" for="month">下载超过一个月了</label>
    </div>
</div>
多选题

同样使用 v-model 来绑定多选框的值，但这里需要绑定一个数组，因为用户可能会选择多个选项。

<div class="question">
    <div class="question-title">2. 您认为以下哪些功能对番茄小说非常重要？（可多选）</div>
    <div class="options">
        <input type="checkbox" id="option1" value="无广告" v-model="answers.importantFeatures">
        <label class="option" for="option1">无广告</label>
        <input type="checkbox" id="option2" value="丰富的书籍种类" v-model="answers.importantFeatures">
        <label class="option" for="option2">丰富的书籍种类</label>
        <input type="checkbox" id="option3" value="推荐算法精准" v-model="answers.importantFeatures">
        <label class="option" for="option3">推荐算法精准</label>
    </div>
</div>
文本输入

问答题部分使用 <textarea>，同样使用 v-model 来绑定输入数据。

<div class="question">
    <div class="question-title">3. 您对番茄小说APP的建议：</div>
    <textarea v-model="answers.suggestions"></textarea>
</div>

5. 表单验证与提交

我们希望在用户提交时检查所有问题是否已填写。可以通过 Vue.js 方法来实现简单的表单验证：

methods: {
    
    
    handleSubmit() {
    
    
        if (this.validateForm()) {
    
    
            this.submitted = true;
        } else {
    
    
            alert('请完成所有问题后再提交');
        }
    },
    validateForm() {
    
    
        return this.answers.usageDuration && this.answers.continueUse && this.answers.attractiveness && this.answers.usability;
    }
}

如果验证成功，我们将 submitted 设置为 true，并切换到结果预览页面。

6. 结果预览功能实现

当用户提交问卷后，系统将显示填写的答案。这是通过简单的条件渲染实现的。

<div v-if="submitted" class="result-preview">
    <h3>问卷结果</h3>
    <p><strong>使用时长:</strong> {
   
   { answers.usageDuration }}</p>
    <p><strong>继续使用:</strong> {
   
   { answers.continueUse }}</p>
    <p><strong>吸引力评价:</strong> {
   
   { answers.attractiveness }}</p>
    <p><strong>易用性评价:</strong> {
   
   { answers.usability }}</p>
</div>

7. 完整代码展示

以下是最终完整的代码，带有问卷题目、单选、多选、文本输入、验证和提交后的预览功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄小说用户满意度调研</title>
    <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
    <style>
        body {
      
      
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        #app {
      
      
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
      
      
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .question {
      
      
            margin-bottom: 20px;
        }
        .question-title {
      
      
            font-weight: bold;
            margin-bottom: 10px;
        }
        .options {
      
      
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .option {
      
      
            width: 48%;
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .option:hover {
      
      
            background-color: #d8d8d8;
        }
        input[type="radio"], input[type="checkbox"] {
      
      
            display: none;
        }
        input[type="radio"]:checked + label,
        input[type="checkbox"]:checked + label {
      
      
            background-color: #4CAF50;
            color: white;
        }
        textarea {
      
      
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        button {
      
      
            width: 100%;
            padding: 15px;
            background-color: #4CAF50;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
      
      
            background-color: #45a049;
        }
        .result-preview {
      
      
            padding: 15px;
            margin-top: 20px;
            background-color: #e0f7fa;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>番茄小说用户满意度调研</h2>
    <p>亲爱的用户：感谢您使用番茄免费小说，诚邀您填写本次调研问卷。我们希望倾听您的声音，帮助我们优化产品，提升用户体验。符合条件的用户还可获得100-200元礼金答谢。</p>
    <div v-if="!submitted">
        <form @submit.prevent="handleSubmit">
            <!-- 第1题 -->
            <div class="question">
                <div class="question-title">1. 您使用番茄小说APP有多久了？</div>
                <div class="options">
                    <input type="radio" id="recent" value="最近两周才下载" v-model="answers.usageDuration">
                    <label class="option" for="recent">最近两周才下载</label>
                    <input type="radio" id="month" value="下载超过一个月了" v-model="answers.usageDuration">
                    <label class="option" for="month">下载超过一个月了</label>
                </div>
            </div>

            <!-- 第2题 -->
            <div class="question">
                <div class="question-title">2. 基于您对番茄小说的体验，您在多大程度上同意以下描述？</div>
                <div class="options">
                    <input type="radio" id="continue1" value="非常同意" v-model="answers.continueUse">
                    <label class="option" for="continue1">非常同意</label>
                    <input type="radio" id="continue2" value="比较同意" v-model="answers.continueUse">
                    <label class="option" for="continue2">比较同意</label>
                    <input type="radio" id="continue3" value="一般" v-model="answers.continueUse">
                    <label class="option" for="continue3">一般</label>
                    <input type="radio" id="continue4" value="不太同意" v-model="answers.continueUse">
                    <label class="option" for="continue4">不太同意</label>
                    <input type="radio" id="continue5" value="非常不同意" v-model="answers.continueUse">
                    <label class="option" for="continue5">非常不同意</label>
                </div>
            </div>

            <!-- 第3题 -->
            <div class="question">
                <div class="question-title">3. 您对番茄小说的吸引力评价：</div>
                <div class="options">
                    <input type="radio" id="attract1" value="非常同意" v-model="answers.attractiveness">
                    <label class="option" for="attract1">非常同意</label>
                    <input type="radio" id="attract2" value="比较同意" v-model="answers.attractiveness">
                    <label class="option" for="attract2">比较同意</label>
                    <input type="radio" id="attract3" value="一般" v-model="answers.attractiveness">
                    <label class="option" for="attract3">一般</label>
                    <input type="radio" id="attract4" value="不太同意" v-model="answers.attractiveness">
                    <label class="option" for="attract4">不太同意</label>
                    <input type="radio" id="attract5" value="非常不同意" v-model="answers.attractiveness">
                    <label class="option" for="attract5">非常不同意</label>
                </div>
            </div>

            <!-- 第4题 -->
            <div class="question">
                <div class="question-title">4. 您对番茄小说APP易用性的评价：</div>
                <textarea v-model="answers.usability"></textarea>
            </div>

            <!-- 提交按钮 -->
            <button type="submit">提交问卷</button>
        </form>
    </div>

    <!-- 提交结果预览 -->
    <div v-if="submitted" class="result-preview">
        <h3>问卷结果</h3>
        <p><strong>使用时长:</strong> {
   
   { answers.usageDuration }}</p>
        <p><strong>继续使用:</strong> {
   
   { answers.continueUse }}</p>
        <p><strong>吸引力评价:</strong> {
   
   { answers.attractiveness }}</p>
        <p><strong>易用性评价:</strong> {
   
   { answers.usability }}</p>
    </div>
</div>

<script>
    new Vue({
      
      
        el: '#app',
        data: {
      
      
            answers: {
      
      
                usageDuration: '',
                continueUse: '',
                attractiveness: '',
                usability: ''
            },
            submitted: false
        },
        methods: {
      
      
            handleSubmit() {
      
      
                if (this.validateForm()) {
      
      
                    this.submitted = true;
                } else {
      
      
                    alert('请完成所有问题后再提交');
                }
            },
            validateForm() {
      
      
                return this.answers.usageDuration && this.answers.continueUse && this.answers.attractiveness && this.answers.usability;
            }
        }
    });
</script>
</body>
</html>

8. 总结

通过本教程，你学习了如何使用 Vue.js 创建一个功能完整的问卷调查页面。包括如何使用单选、多选和文本输入字段，如何进行表单验证，如何在提交后展示结果等。这个项目对于初学者来说是一个很好的实践，能够帮助你理解 Vue.js 的基本用法。

猜你喜欢

目录

热门文章