Vue多重循环控制当前点击DOM元素样式，默认第一组第一个元素有颜色，Vue实现考试功能，上一题，下一题移动功能，包括题干题目选项回显等

HuiRonmantic

已于 2024-05-15 10:29:42 修改

阅读量121

点赞数

分类专栏：大前端文章标签： vue.js 前端 javascript

于 2022-07-29 15:31:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/126056939

版权

大前端专栏收录该内容

35 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文记录了使用Vue实现考试功能的过程，包括四种答题状态的逻辑处理，如默认显示第一组第一个元素高亮，以及实现上一题、下一题的移动功能，同时确保题干和选项的回显。文章提供了实现该功能的完整代码，并指出代码仍有优化空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个功能是比较考验逻辑的，在此做个记录，用于后期记忆学习，四种答题状态

效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/9c085c8bd3864ec9821b06a4c75a80ee.png

完整代码，处理这种功能或许比较简单，代码还有优化的余地

<template>
  <div class="ExamBox">
    <!-- <div class="headerTitle">
      <div class="Icobs">
        <div class="accountTitle1">账号 :</div>
        <div class="accountTitleNumber">{
  { userAccount }}</div>
        <div class="accountTitle3">姓名 : {
  { studentNames }}</div>
        <div class=