使用 Vue.js 构建问卷调查页面——新手教程
效果图（后面有完整源代码）：
目录
- 引言
- 创建 HTML 基础页面
- 使用 CSS 美化页面
- 集成 Vue.js 实现数据交互
- 完整代码
引言
问卷调查页面是前端开发中常见的功能之一。通过这篇教程，我们将学习如何使用 HTML、CSS 和 Vue.js 构建一个简洁的问卷调查页面。该页面包含了常见的单选、多选、文本输入和表单提交的功能，并通过 Vue.js 实现表单数据的实时绑定与提交结果的展示，非常适合前端开发入门新手。
1. 创建 HTML 基础页面
首先，我们要创建一个基础的 HTML 页面来放置我们的问卷内容。HTML 文件的结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>问卷调查页面 - Vue.js 示例</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>问卷调查</h1>
<form @submit.prevent="submitSurvey">
<!-- 表单内容 -->
</form>
<!-- 提交结果展示 -->
<div class="result" v-if="submitted">
<h2>问卷提交成功！</h2>
<!-- 展示提交的数据 -->
</div>
</div>
</body>
</html>
这段代码展示了 HTML 页面结构，并使用 Vue.js 进行数据绑定。
2. 使用 CSS 美化页面
为了让页面更美观，我们需要为其添加一些 CSS 样式，确保输入框、按钮等组件具有一致的布局和样式。这里我们为表单的布局、输入框、按钮等元素设计了简洁的样式：
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.question {
margin-bottom: 20px;
}
.question label {
font-weight: bold;
margin-bottom: 10px;
display: block;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 14px;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}
/* 修复多选项未在同一行显示的问题 */
.question,.checkbox-group {
display: flex;
gap: 10px;
}
.checkbox-group label {
display: inline-block;
}
button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.result {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #e8f5e9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
这段样式使得页面更加简洁、现代，也确保了表单元素（如输入框、按钮、复选框等）的样式统一。
3. 集成 Vue.js 实现数据交互
接下来我们通过 Vue.js 实现表单的交互功能，如表单提交、数据实时绑定和提交结果展示。Vue.js 的强大之处在于它可以简化我们对数据的管理，实现数据驱动视图更新。
<script>
new Vue({
el: '#app',
data: {
survey: {
gender: '',
age: '',
interests: [],
hobbies: ''
},
submitted: false
},
methods: {
submitSurvey() {
this.submitted = true;
}
}
})
</script>
在这段代码中，我们定义了 survey 数据对象，存储用户的选择和输入数据。submitted 则是一个布尔值，用于在表单提交后展示结果。通过 v-model 指令，我们可以将用户的输入绑定到 survey 对象中。
4. 完整代码
最终的问卷调查页面完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>问卷调查页面 - Vue.js 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.question {
margin-bottom: 20px;
}
.question label {
font-weight: bold;
margin-bottom: 10px;
display: block;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 14px;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}
.question,.checkbox-group {
display: flex;
gap: 10px;
}
.checkbox-group label {
display: inline-block;
}
button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.result {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #e8f5e9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="app">
<h1>问卷调查</h1>
<form @submit.prevent="submitSurvey">
<div class="question">
<label>1. 您的性别：</label>
<input type="radio" id="male" value="男" v-model="survey.gender">
<label for="male">男</label>
<input type="radio" id="female" value="女" v-model="survey.gender">
<label for="female">女</label>
</div>
<div class="question">
<label>2. 您的年龄：</label>
<select v-model="survey.age">
<option disabled value="">请选择年龄段</option>
<option value="18-25">18-25岁</option>
<option value="26-35">26-35岁</option>
<option value="36-45">36-45岁</option>
<option value="45+">45岁以上</option>
</select>
</div>
<div class="question">
<label>3. 您感兴趣的领域：（可多选）</label>
<div class="checkbox-group">
<div>
<input type="checkbox" id="tech" value="科技" v-model="survey.interests">
<label for="tech">科技</label>
</div>
<div>
<input type="checkbox" id="sports" value="体育" v-model="survey.interests">
<label for="sports">体育</label>
</div>
<div>
<input type="checkbox" id="art" value="艺术" v-model="survey.interests">
<label for="art">艺术</label>
</div>
<div>
<input type="checkbox" id="music" value="音乐" v-model="survey.interests">
<label for="music">音乐</label>
</div>
</div
>
</div>
<div class="question">
<label>4. 请简单描述您的兴趣爱好：</label>
<textarea v-model="survey.hobbies" rows="4" placeholder="请输入内容"></textarea>
</div>
<button type="submit">提交问卷</button>
</form>
<div class="result" v-if="submitted">
<h2>问卷提交成功！</h2>
<p><strong>性别：</strong> {{ survey.gender }}</p>
<p><strong>年龄：</strong> {{ survey.age }}</p>
<p><strong>兴趣领域：</strong> {{ survey.interests.join(', ') }}</p>
<p><strong>兴趣爱好：</strong> {{ survey.hobbies }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
survey: {
gender: '',
age: '',
interests: [],
hobbies: ''
},
submitted: false
},
methods: {
submitSurvey() {
this.submitted = true;
}
}
})
</script>
</body>
</html>
结语
通过本教程，你学到了如何使用 Vue.js 实现问卷调查页面的功能。Vue.js 强大的双向数据绑定和事件处理机制，让表单数据的管理变得十分简单和高效。希望这篇教程能为前端入门的你提供帮助！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
