最近公司做了一个测评系统，因为时间很短，本以为会很简单，没有想到踩了很多坑。

先看下部分效果图吧

 然后在说下需求 

1：所有的答案都是动态的（例如选择是出来的是第二题，选择否出来的是第五题）

2：没有答过的题不显示下一题按钮，答过的题显示上一题按钮

3：答过的题，返回上一题 显示上一题和下一题按钮（第一题和最后一题例外）

4：最后一题显示上一题和答案解析按钮

5：选择的时候 自动跳转到下一题

6：已经答过的题，更改后，从此题开始 后面答过的题清除（需求则是返回上一题，点击后不管有无更改 后面的题都清除，自己感觉不合理）

看似很简单，其实并不是很好处理 但是当思路捋清楚了 就很好做了 

先捋一捋思路 无非三种操作 上一题、下一题、和答题和三种按钮状态 上一题 下一题 查看答案

然后开始拆分功能

首先是答题

1.判断是不是最后一题

  1.1是：

        1.1.1 显示上一题按钮 

        1.1.2显示答案解析按钮

  1.2不是：

         1.2.1显示下一题按钮

         1.2.2 显示上一题按钮

          1.2.3对比和之前的变化 当前题是否有值

          1.2.3.1是  ==》哪一题开始清空

           1.2.3.2否  ===》清空

   2.选择赋值的时机

   3. 当前题点击的时候 判断是不是最后一题 （已经答过的题）

    3.1 当前题是第几题  =》从全部答案里面找 得到索引

    3.2 判断当前提是否答过

         答过：当前题的答案去匹配已经打过的题的当前题

         判断下一题是否有 

        有==》不处理

       五 ==》显示查看答案按钮

2.下一题

 2.1 显示上一题

2.2过滤已经答过的题目 =》找到当前题的索引

2.3判断当前题的下一题是否存在

    2.3.1不存在

     判断是否显示查看答案的按钮

    是  =》显示答案解析按钮

    否 =》 显示下一题

    2.3.2存在

    显示下一题

    判断是否最后一题 判断依据如下

    1从全部题里面找到当前题

    2从已经答过的题里面找到对应的索引‘

    3当前题的题目答案中匹配已答项的答案

    4判断当前题答案中是否有下一题

     有==》不处理

     无==》显示答案解析按钮 

 3 上一题

  3.1 显示下一题按钮 

  3.2 判断上一题按钮是否显示

  3.3 显示上一题

  3.4 记录答案

    看一下完整代码吧（vue3+vant）

看下题目的数据结构

 感兴趣的小伙伴可以自己动手试一试 看似简单的东西 里面很有多坑  有需求的可以私信我 免费获取全部代码