vue实现答题切换

实现答题切换功能

在Vue中实现答题切换功能可以通过动态绑定题目数据和切换索引来完成。以下是一个基本实现示例：

模板部分

<template>
  <div class="quiz-container">
    <div v-if="currentQuestion">
      <h3>{{ currentQuestion.text }}</h3>
      <ul>
        <li v-for="(option, index) in currentQuestion.options" :key="index">
          <input 
            type="radio" 
            :id="'option'+index" 
            :value="option" 
            v-model="selectedAnswer"
          >
          <label :for="'option'+index">{{ option }}</label>
        </li>
      </ul>
    </div>

    <button @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
    <button @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      questions: [
        {
          text: "问题1",
          options: ["选项A", "选项B", "选项C"],
          answer: "选项A"
        },
        {
          text: "问题2", 
          options: ["选项1", "选项2", "选项3"],
          answer: "选项2"
        }
      ],
      currentIndex: 0,
      selectedAnswer: ""
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex];
    }
  },
  methods: {
    nextQuestion() {
      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++;
        this.selectedAnswer = "";
      }
    },
    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.selectedAnswer = "";
      }
    }
  }
}
</script>

添加答题状态保存

为了在切换题目时保存已选择的答案，可以修改数据结构：

data() {
  return {
    questions: [...],
    currentIndex: 0,
    answers: {} // 使用对象保存每题的答案
  }
},
methods: {
  nextQuestion() {
    // 保存当前答案
    this.$set(this.answers, this.currentIndex, this.selectedAnswer);

    if (this.currentIndex < this.questions.length - 1) {
      this.currentIndex++;
      this.selectedAnswer = this.answers[this.currentIndex] || "";
    }
  },
  prevQuestion() {
    this.$set(this.answers, this.currentIndex, this.selectedAnswer);

    if (this.currentIndex > 0) {
      this.currentIndex--;
      this.selectedAnswer = this.answers[this.currentIndex] || "";
    }
  }
}

添加进度显示

可以在模板中添加进度指示：

<div class="progress">
  当前进度: {{ currentIndex + 1 }}/{{ questions.length }}
</div>

样式优化

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

<style>
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

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

li {
  margin: 10px 0;
}

button {
  margin: 10px;
  padding: 8px 16px;
}

button:disabled {
  opacity: 0.5;
}

.progress {
  margin: 20px 0;
  font-weight: bold;
}
</style>

完整组件示例

将以上部分组合起来，就形成了一个完整的答题切换组件：

<template>
  <div class="quiz-container">
    <div class="progress">
      当前进度: {{ currentIndex + 1 }}/{{ questions.length }}
    </div>

    <div v-if="currentQuestion">
      <h3>{{ currentQuestion.text }}</h3>
      <ul>
        <li v-for="(option, index) in currentQuestion.options" :key="index">
          <input 
            type="radio" 
            :id="'option'+index" 
            :value="option" 
            v-model="selectedAnswer"
          >
          <label :for="'option'+index">{{ option }}</label>
        </li>
      </ul>
    </div>

    <button @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
    <button @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          text: "Vue是什么？",
          options: ["前端框架", "后端语言", "数据库"],
          answer: "前端框架"
        },
        {
          text: "v-model的作用是什么？", 
          options: ["数据绑定", "样式绑定", "事件绑定"],
          answer: "数据绑定"
        },
        {
          text: "Vue的核心特性不包括？",
          options: ["组件化", "响应式", "多线程"],
          answer: "多线程"
        }
      ],
      currentIndex: 0,
      answers: {},
      selectedAnswer: ""
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex];
    }
  },
  methods: {
    nextQuestion() {
      this.$set(this.answers, this.currentIndex, this.selectedAnswer);

      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++;
        this.selectedAnswer = this.answers[this.currentIndex] || "";
      }
    },
    prevQuestion() {
      this.$set(this.answers, this.currentIndex, this.selectedAnswer);

      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.selectedAnswer = this.answers[this.currentIndex] || "";
      }
    }
  }
}
</script>

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

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

li {
  margin: 10px 0;
}

button {
  margin: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.progress {
  margin: 20px 0;
  font-weight: bold;
}

input[type="radio"] {
  margin-right: 10px;
}
</style>

这个实现包含了答题切换的基本功能，可以进一步扩展添加提交验证、计时器、答题结果统计等高级功能。