vue+vant制作一个做题页面（包含选择题，判断题，填空题，简答题）

• 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
• 座右铭：未来是不可确定的，慢慢来是最快的。
• 个人主页：极客李华-CSDN博客
• 合作方式：私聊+
• 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
• 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
• 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

vue+vant制作一个做题页面（包含选择题，判断题，填空题，简答题）

本文讲解如何结合vue+vant制作一个做题页面里面包含选择题，判断题，填空题，简答题，还包含计算成绩的功能。

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

代码讲解

效果展示

完整代码如下：

<template>
	<div>
		<!-- 标题栏 -->
		<van-nav-bar title="题目测试" left-text="返回" left-arrow @click-left="onClickLeft" />

		<!-- 题目列表 -->
		<van-list v-if="questions.length > 0">
			<div class="question-card" v-for="(question, index) in questions" :key="question.id">
				<van-card
						  :title="index + 1 + '. ' + question.content"
						  :class="{ 'bg-red': showAnswer[question.id] && selectedAnswers[question.id] !== question.answer }">
					<!-- 根据题目类型进行渲染 -->
					<template v-if="question.questionType === '选择题'" #desc>
						<van-radio-group v-model="selectedAnswers[question.id]">
							<van-radio :name="'A'">A.{{ question.optionA }}</van-radio>
							<van-radio :name="'B'">B.{{ question.optionB }}</van-radio>
							<van-radio :name="'C'">C.{{ question.optionC }}</van-radio>
							<van-radio :name="'D'">D.{{ question.optionD }}</van-radio>
						</van-radio-group>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '判断题'" #desc>
						<van-radio-group v-model="selectedAnswers[question.id]" :direction="isVertical ? 'vertical' : 'horizontal'">
							<van-radio :name="'true'">正确</van-radio>
							<van-radio :name="'false'">错误</van-radio>
						</van-radio-group>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '简答题'" #desc>
						<van-field v-model="selectedAnswers[question.id]" :rows="3" placeholder="请输入简答题答案" />
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '填空题'" #desc>
						<van-field
								   v-model="selectedAnswers[question.id]"
								   label-width="80px"
								   placeholder="请输入填空题答案">
							<template #label>请填写答案：</template>
						</van-field>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>        					
				</van-card>
			</div>
		</van-list>

		<!-- 无数据占位符 -->
		<van-empty v-else />

		<!-- 提交答案按钮 -->
		<van-button ref="submitButton" block type="primary" :disabled="isSubmitting" @click="onSubmit">{{ submitBtnText }}</van-button>
	</div>
</template>

<script>
	import axios from "axios";
	import { showDialog } from 'vant';
	export default {
	  data() {
	    return {
	      questions: [], // 题目列表
	      selectedAnswers: {}, // 用户选择的答案
	      showAnswer: {}, // 是否显示答案
	      isVertical: false, // 是否垂直布局选项（主要用于选择题）
	      currentQuestionIndex: 0, // 当前问题的索引
	      totalScore: 0, // 总分数
	      isSubmitting: false, // 是否正在提交答案
	    };
	  },
	  computed: {
	    submitBtnText() {
	      return this.isSubmitting ? '正在提交' : '提交'
	    }
	  },
	  methods: {
	    // 返回按钮点击事件处理函数
	    onClickLeft() {
	      this.$router.push("/my");
	    },
	
	    // 提交答案的代码
	    onSubmit() {
	      let totalCount = Object.keys(this.selectedAnswers).length;
	      let correctCount = 0;
	      let score = 0;
	
	      // 禁用提交按钮
	      this.isSubmitting = true
	
	      // 计算总得分
	      for (const question of this.questions) {
	        const userAnswer = this.selectedAnswers[question.id];
	        if (userAnswer === question.answer) {
	          correctCount++;
	          score += question.score;
	        }
	        // 显示正确答案
	        this.showAnswer[question.id] = true;
	      }
	      this.totalScore = score;
	
	      // 使用vant-ui组件弹出对话框显示结果
	  const message = `你选择了 ${totalCount} 道题，答对了 ${correctCount} 道题。总得分：${this.totalScore} 分。`;
	
	  showDialog({
	    title: "考试结束啦>_<",
	    message: message,
	  }).then(() => {
	    // on close
	  });
	
	  // 禁用提交按钮
	  this.isSubmitting = true
	  
	  // 显示正确答案
	  for (const question of this.questions) {
	    this.showAnswer[question.id] = true;
	  }
    // console.log("正确答案集合")
    // for (let i = 0; i < this.questions.length; ++ i){
    //   console.log(this.questions[i].answer)
    // }

    console.log("用户选择的正确答案集合")
    console.log(this.selectedAnswers)
	},
	
	
	// 获取问题分数
	getQuestionScore(questionId) {
	  const userAnswer = this.selectedAnswers[questionId];
	  const question = this.questions.find((q) => q.id === questionId);
	  return userAnswer === question.answer ? question.score : 0;
	},
	
	// 显示当前问题
	showQuestion() {
	  // 获取当前问题
	  const question = this.questions[this.currentQuestionIndex];
	
	  // 根据题目类型渲染问题
	  switch (question.questionType) {
	    case "选择题":
	      this.isVertical = false;
	      break;
	    case "判断题":
	      this.isVertical = true;
	      break;
	  }
	
	  // 显示问题并将提交按钮重新启用
	  this.$refs.submitButton.disable = false;
	},
	},
	mounted() {
	// 获取题目列表
	axios
	.get("http://localhost:8083/questions")
	.then((res) => {
	this.questions = res.data.data;
	
	    // 对问题数据进行按题目类型排序
	    this.questions.sort((a, b) => {
	      const typeOrder = { "选择题": 0, "判断题": 1, "填空题": 2, "简答题": 3 };
	      return typeOrder[a.questionType] - typeOrder[b.questionType];
	    });
	
	    // 显示第一个问题
	    this.showQuestion();
	  })
	  .catch((error) => {
	    console.log(error);
	  });
	},
	};
</script>

<style>
	.answer {
	color: red;
	margin-bottom: 0;
	}
	.correct {
	color: green;
	}
</style>

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下