当前位置：首页 > VUE

vue实现选择题

2026-01-21 13:38:52VUE

Vue实现选择题的基本方法

使用Vue.js实现选择题功能可以通过数据驱动和组件化思想完成。以下是一个典型的实现方案：

创建选择题组件

<template>
  <div class="quiz-container">
    <h3>{{ question.title }}</h3>
    <div v-for="(option, index) in question.options" :key="index">
      <input 
        type="radio" 
        :id="'option'+index" 
        :value="index" 
        v-model="selectedOption"
      >
      <label :for="'option'+index">{{ option.text }}</label>
    </div>
    <button @click="submitAnswer">提交</button>
    <p v-if="feedback">{{ feedback }}</p>
  </div>
</template>

<script>
export default {
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedOption: null,
      feedback: ''
    }
  },
  methods: {
    submitAnswer() {
      if (this.selectedOption === null) {
        this.feedback = '请选择一个答案';
        return;
      }

      const isCorrect = this.question.options[this.selectedOption].correct;
      this.feedback = isCorrect ? '回答正确!' : '回答错误';
    }
  }
}
</script>

数据结构设计

选择题的数据结构可以这样设计：

{
  title: "Vue是什么？",
  options: [
    { text: "一个前端框架", correct: true },
    { text: "一种编程语言", correct: false },
    { text: "一个数据库系统", correct: false },
    { text: "一个操作系统", correct: false }
  ]
}

实现多选题功能

如果需要支持多选题，可以修改为checkbox实现：

<template>
  <div>
    <h3>{{ question.title }}</h3>
    <div v-for="(option, index) in question.options" :key="index">
      <input 
        type="checkbox" 
        :id="'option'+index" 
        :value="index" 
        v-model="selectedOptions"
      >
      <label :for="'option'+index">{{ option.text }}</label>
    </div>
    <button @click="submitAnswer">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  },
  methods: {
    submitAnswer() {
      const correctAnswers = this.question.options
        .map((opt, idx) => opt.correct ? idx : null)
        .filter(val => val !== null);

      const isCorrect = 
        this.selectedOptions.length === correctAnswers.length &&
        this.selectedOptions.every(opt => correctAnswers.includes(opt));
    }
  }
}
</script>

添加题目导航功能

对于多题目测试，可以创建父组件管理题目切换：

<template>
  <div>
    <quiz-question 
      :question="questions[currentQuestion]" 
      @answer-submitted="handleAnswer"
    />
    <button 
      @click="prevQuestion" 
      :disabled="currentQuestion === 0"
    >上一题</button>
    <button 
      @click="nextQuestion" 
      :disabled="currentQuestion === questions.length - 1"
    >下一题</button>
  </div>
</template>

<script>
import QuizQuestion from './QuizQuestion.vue';

export default {
  components: { QuizQuestion },
  data() {
    return {
      currentQuestion: 0,
      questions: [
        // 题目数组
      ],
      userAnswers: []
    }
  },
  methods: {
    handleAnswer(answer) {
      this.userAnswers[this.currentQuestion] = answer;
    },
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--;
      }
    },
    nextQuestion() {
      if (this.currentQuestion < this.questions.length - 1) {
        this.currentQuestion++;
      }
    }
  }
}
</script>

样式优化建议

为选择题添加基础样式提升用户体验：

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

.quiz-container h3 {
  margin-bottom: 20px;
}

.quiz-container div {
  margin: 10px 0;
}

.quiz-container label {
  margin-left: 10px;
  cursor: pointer;
}

.quiz-container button {
  margin-top: 20px;
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}