当前位置：首页 > VUE

vue实现在线答题

2026-02-23 14:58:01VUE

实现思路

使用Vue.js实现在线答题系统，需要结合组件化开发、状态管理和数据绑定。核心功能包括题目展示、选项选择、答案提交和结果统计。

基础项目搭建

安装Vue CLI并创建项目：

npm install -g @vue/cli
vue create online-quiz
cd online-quiz

安装必要依赖：

npm install vue-router axios

数据结构设计

设计题目数据格式：

vue实现在线答题

// quizData.js
export default [
  {
    id: 1,
    question: "Vue的核心特性是什么？",
    options: ["组件化", "双向绑定", "虚拟DOM", "全部"],
    answer: 3
  },
  // 更多题目...
]

核心组件实现

创建答题组件：

<!-- Quiz.vue -->
<template>
  <div class="quiz-container">
    <h3>{{ currentQuestion.question }}</h3>
    <ul>
      <li v-for="(option, index) in currentQuestion.options" 
          :key="index"
          @click="selectAnswer(index)"
          :class="{ selected: selectedAnswer === index }">
        {{ option }}
      </li>
    </ul>
    <button @click="submitAnswer" :disabled="selectedAnswer === null">提交</button>
  </div>
</template>

<script>
import quizData from './quizData'

export default {
  data() {
    return {
      questions: quizData,
      currentIndex: 0,
      selectedAnswer: null,
      score: 0
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex]
    }
  },
  methods: {
    selectAnswer(index) {
      this.selectedAnswer = index
    },
    submitAnswer() {
      if (this.selectedAnswer === this.currentQuestion.answer) {
        this.score++
      }
      this.nextQuestion()
    },
    nextQuestion() {
      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++
        this.selectedAnswer = null
      } else {
        this.$emit('quiz-completed', this.score)
      }
    }
  }
}
</script>

结果展示组件

创建结果显示组件：

<!-- Result.vue -->
<template>
  <div class="result-container">
    <h3>测试完成</h3>
    <p>您的得分: {{ score }}/{{ total }}</p>
    <button @click="restart">重新测试</button>
  </div>
</template>

<script>
export default {
  props: {
    score: Number,
    total: Number
  },
  methods: {
    restart() {
      this.$emit('restart-quiz')
    }
  }
}
</script>

路由配置

配置页面路由：

vue实现在线答题

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Quiz from './components/Quiz'
import Result from './components/Result'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Quiz },
    { path: '/result', component: Result }
  ]
})

状态管理

对于复杂应用，建议使用Vuex管理状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    score: 0,
    totalQuestions: 0
  },
  mutations: {
    incrementScore(state) {
      state.score++
    },
    setTotalQuestions(state, total) {
      state.totalQuestions = total
    },
    resetScore(state) {
      state.score = 0
    }
  }
})

样式优化

添加基础样式：

/* App.vue */
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  cursor: pointer;
}

li.selected {
  background-color: #e0f7fa;
  border-color: #4dd0e1;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:disabled {
  background-color: #cccccc;
}