vue答题功能实现
Vue 答题功能实现方案
数据结构和状态管理
使用 Vue 的 data 或 ref（Composition API）管理题目和用户答案：
data() {
return {
questions: [
{
id: 1,
text: "问题1",
options: ["A", "B", "C"],
answer: "A"
}
],
currentIndex: 0,
userAnswers: {}
}
}题目渲染组件
通过 v-for 动态渲染题目和选项：
<template>
<div v-for="(q, index) in questions" :key="q.id">
<h3>{{ q.text }}</h3>
<div v-for="option in q.options" :key="option">
<input
type="radio"
:name="'q'+index"
:value="option"
v-model="userAnswers[index]">
{{ option }}
</div>
</div>
</template>答题逻辑处理
计算得分和验证答案：
methods: {
checkAnswers() {
let score = 0
this.questions.forEach((q, index) => {
if (this.userAnswers[index] === q.answer) {
score++
}
})
return score
}
}进度控制
添加题目导航按钮：
<button @click="currentIndex--" :disabled="currentIndex === 0">上一题</button>
<button @click="currentIndex++" :disabled="currentIndex >= questions.length-1">下一题</button>结果展示
使用计算属性显示结果：
computed: {
result() {
const correct = this.checkAnswers()
return `正确 ${correct}/${this.questions.length}`
}
}进阶功能建议
- 使用 Vuex/Pinia 管理全局状态
- 添加计时器功能
- 实现题目分类和难度分级
- 加入动画过渡效果
- 支持多种题型（多选题、判断题等）
样式优化
建议使用 CSS 模块化或 SCSS：
.question {
margin-bottom: 20px;
}
.options {
display: flex;
flex-direction: column;
}以上方案可根据实际需求进行调整，核心在于响应式数据绑定和组件化设计。
