当前位置：首页 > VUE

vue实现试题页面

2026-01-18 09:11:43VUE

实现试题页面的基本结构

使用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)
}