效果图
博客教程目录
- 简介
- 项目初始化
- 问卷调查页面的结构设计
- 表单数据绑定与交互实现
- 表单校验及验证逻辑
- 表单提交与结果预览页面
- 完整代码展示
- 结语
详细步骤
简介
在本篇教程中，我们将学习如何使用 Vue.js 来创建一个市场问卷调查页面。这个项目包括单选题、多选题和问答题，同时实现了表单校验、数据绑定和问卷提交后的结果预览功能。适合前端新手快速入门 Vue.js。
1. 项目初始化
首先，我们将创建一个 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>
<style>
/* 样式部分 */
</style>
</head>
<body>
<div id="app">
<!-- Vue 代码将插入这里 -->
</div>
</body>
</html>
2. 问卷调查页面的结构设计
在页面中，我们将设置一些基础的 HTML 结构，包括性别、年龄、职业选择等问题，以及提交按钮和表单验证提示。这里用到了 Vue.js 的 v-model 来进行数据绑定。
<div id="app">
<h2>市场问卷调查</h2>
<form @submit.prevent="handleSubmit">
<!-- 单选题示例：性别选择 -->
<div class="question">
<label>1. 您的性别是？</label>
<div class="options">
<input type="radio" id="male" value="男" v-model="form.gender">
<label for="male">男</label>
<input type="radio" id="female" value="女" v-model="form.gender">
<label for="female">女</label>
</div>
<div class="error" v-if="errors.gender">请选择性别</div>
</div>
<!-- 多选题示例：使用频率 -->
<div class="question">
<label>2. 您多久使用一次我们的产品？（可多选）</label>
<div class="checkbox-options">
<input type="checkbox" id="daily" value="每天" v-model="form.usageFrequency">
<label for="daily">每天</label>
<input type="checkbox" id="weekly" value="每周" v-model="form.usageFrequency">
<label for="weekly">每周</label>
<input type="checkbox" id="monthly" value="每月" v-model="form.usageFrequency">
<label for="monthly">每月</label>
</div>
<div class="error" v-if="errors.usageFrequency">请选择至少一个选项</div>
</div>
<!-- 提交按钮 -->
<button type="submit">提交问卷</button>
</form>
</div>
3. 表单数据绑定与交互实现
在 Vue.js 中，我们使用 v-model 来进行双向数据绑定，这意味着用户输入的数据会自动更新到 Vue 组件的 data 中。我们为每个问题添加 v-model，以实现即时的数据绑定。
data: {
form: {
gender: '',
age: '',
job: '',
usageFrequency: [],
suggestions: ''
},
errors: {
gender: false,
age: false,
job: false,
usageFrequency: false,
suggestions: false
},
submitted: false
}
4. 表单校验及验证逻辑
我们需要在用户提交问卷时进行校验，确保每个问题都填写完整。表单提交时，如果有未填项，将在相应位置显示错误提示。校验逻辑可以放在 validateForm 方法中。
methods: {
validateForm() {
this.errors.gender = !this.form.gender;
this.errors.age = !this.form.age;
this.errors.job = !this.form.job;
this.errors.usageFrequency = this.form.usageFrequency.length === 0;
this.errors.suggestions = !this.form.suggestions.trim();
return !this.errors.gender && !this.errors.age && !this.errors.job && !this.errors.usageFrequency && !this.errors.suggestions;
},
handleSubmit() {
if (this.validateForm()) {
this.submitted = true;
}
}
}
5. 表单提交与结果预览页面
当表单通过校验后，我们将进入问卷结果预览页面，显示用户填写的所有信息。
<div v-if="submitted" class="preview">
<h3>问卷结果预览</h3>
<p><strong>性别：</strong> {
{ form.gender }}</p>
<p><strong>年龄：</strong> {
{ form.age }}</p>
<p><strong>职业：</strong> {
{ form.job }}</p>
<p><strong>使用产品的频率：</strong> {
{ form.usageFrequency.join('，') }}</p>
<p><strong>改进建议：</strong> {
{ form.suggestions }}</p>
</div>
6. 完整代码展示
<!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>
/* 样式代码 */
</style>
</head>
<body>
<div id="app">
<h2>市场问卷调查</h2>
<form @submit.prevent="handleSubmit">
<!-- 表单问题 -->
</form>
<!-- 结果预览 -->
</div>
<script>
new Vue({
el: '#app',
data: {
form: {
gender: '', age: '', job: '', usageFrequency: [], suggestions: '' },
errors: {
gender: false, age: false, job: false, usageFrequency: false, suggestions: false },
submitted: false
},
methods: {
validateForm() {
/* 校验逻辑 */ },
handleSubmit() {
if (this.validateForm()) this.submitted = true; }
}
});
</script>
</body>
</html>
7. 结语
通过这个项目，你学会了如何用 Vue.js 实现问卷调查页面，并掌握了表单处理、数据校验、提交及预览的基本操作。你可以在这个基础上继续优化和扩展，增加更多的交互效果或分析功能。
希望这个详细的教程对你有帮助！