当前位置：首页 > VUE

vue 实现答题功能

2026-03-10 01:53:18VUE

实现答题功能的基本思路

在Vue中实现答题功能，通常需要设计以下核心组件：题目展示、选项交互、答题状态管理、结果统计等。下面将分步骤说明具体实现方式。

数据结构设计

答题功能的基础是合理的数据结构。通常需要定义题目列表和用户答案存储对象。

data() {
  return {
    questions: [
      {
        id: 1,
        title: "问题1",
        options: ["选项A", "选项B", "选项C"],
        answer: 0 // 正确答案索引
      },
      // 更多题目...
    ],
    userAnswers: {}, // 存储用户答案 {题目id: 选择索引}
    currentIndex: 0 // 当前题目索引
  }
}

题目展示组件

创建题目展示组件，渲染当前题目和选项。

<template>
  <div class="question-container">
    <h3>{{ currentQuestion.title }}</h3>
    <ul>
      <li v-for="(option, index) in currentQuestion.options" 
          :key="index"
          @click="selectAnswer(index)"
          :class="{ selected: isSelected(index) }">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

答案选择逻辑

实现选项选择和答案存储功能。

methods: {
  selectAnswer(index) {
    this.$set(this.userAnswers, this.currentQuestion.id, index)
  },
  isSelected(index) {
    return this.userAnswers[this.currentQuestion.id] === index
  }
},
computed: {
  currentQuestion() {
    return this.questions[this.currentIndex]
  }
}

题目导航控制

添加题目切换按钮和进度控制。

<div class="navigation">
  <button @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
  <span>{{ currentIndex + 1 }}/{{ questions.length }}</span>
  <button @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
</div>

答题结果计算

实现提交功能并计算得分。

methods: {
  submitAnswers() {
    let score = 0
    this.questions.forEach(q => {
      if (this.userAnswers[q.id] === q.answer) {
        score++
      }
    })
    return {
      total: this.questions.length,
      correct: score,
      percentage: (score / this.questions.length * 100).toFixed(2)
    }
  }
}

样式增强

添加基础样式提升用户体验。

.question-container li {
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
}
.question-container li.selected {
  background-color: #e6f7ff;
  border-color: #1890ff;
}
.navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}