vue实现试题页面
实现试题页面的基本结构
使用Vue的组件化思想构建试题页面，通常需要拆分为题目展示区、选项区、答题控制区等模块。以下是一个基础实现方案：
<template>
<div class="exam-container">
<div class="question-area">
<h3>{{ currentQuestion.title }}</h3>
<div v-html="currentQuestion.content"></div>
</div>
<div class="options-area">
<div
v-for="(option, index) in currentQuestion.options"
:key="index"
@click="selectOption(index)"
:class="{ 'selected': selectedOption === index }"
>
{{ option }}
</div>
</div>
<div class="control-area">
<button @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
<button @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
<button @click="submitAnswer">提交答案</button>
</div>
</div>
</template>数据管理方案
采用Vue的响应式系统管理试题数据和用户作答状态：
<script>
export default {
data() {
return {
questions: [
{
id: 1,
title: "题目1",
content: "这是第一道题的题干内容",
options: ["选项A", "选项B", "选项C", "选项D"],
answer: null
},
// 更多题目...
],
currentIndex: 0,
selectedOption: null
}
},
computed: {
currentQuestion() {
return this.questions[this.currentIndex]
}
},
methods: {
selectOption(index) {
this.selectedOption = index
this.currentQuestion.answer = index
},
prevQuestion() {
if (this.currentIndex > 0) {
this.currentIndex--
this.selectedOption = this.currentQuestion.answer
}
},
nextQuestion() {
if (this.currentIndex < this.questions.length - 1) {
this.currentIndex++
this.selectedOption = this.currentQuestion.answer
}
},
submitAnswer() {
// 提交逻辑
}
}
}
</script>样式处理建议
为试题页面添加基础样式提升用户体验：
<style scoped>
.exam-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.question-area {
margin-bottom: 30px;
padding: 15px;
background: #f5f5f5;
border-radius: 5px;
}
.options-area div {
padding: 10px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.options-area div.selected {
background-color: #e1f5fe;
border-color: #4fc3f7;
}
.control-area {
margin-top: 20px;
display: flex;
gap: 10px;
}
</style>高级功能实现
对于更复杂的需求，可以考虑以下扩展方案：
状态持久化 使用vuex或pinia管理全局答题状态，结合localStorage实现页面刷新后恢复答题进度。
题型适配 通过动态组件处理不同题型：
<component
:is="currentQuestion.type"
:question="currentQuestion"
@answer="handleAnswer"
/>计时功能 添加答题计时器：
data() {
return {
timer: 0,
timerInterval: null
}
},
mounted() {
this.timerInterval = setInterval(() => {
this.timer++
}, 1000)
},
beforeUnmount() {
clearInterval(this.timerInterval)
}性能优化建议
对于大量试题的场景：
- 使用虚拟滚动技术(vue-virtual-scroller)优化长列表渲染
- 实现分页加载或懒加载试题内容
- 对静态资源如图片进行压缩处理
- 使用keep-alive缓存已答题目组件
以上方案可根据实际项目需求进行组合和调整，构建出符合业务场景的试题页面系统。
