vue 简单实现上一题下一题问答效果

小-小菜鸟

于 2022-08-20 09:59:44 发布

阅读量3.3k

点赞数 3

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_59893114/article/details/126425466

版权

本文介绍了如何使用Vue来简单实现问答式的上一题和下一题功能。内容包括展示题目数量和当前题序号的逻辑，以及在第一题时仅显示下一题按钮的设定。当答案未给出或者答案错误时，禁止点击下一题，并通过不同的颜色展示回答的正确性。

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

1.先来看下效果（左上展示题目数量以及当前题序号，当第一题时只有下一题按钮，未回答问题时无法点击下一题，且回答结果展示错误或正确的颜色）

2.接下来我们来看下html是怎么写的吧

<!-- 左边数据 -->
 <div class="top-left">
   <img src="../../images/question_left.png" alt="" />
   <div class="top-text">{
  { idx + 1 }}/{
  { questionList.length }}</div>
  </div>

 <!-- 问答题目 -->
  <div class="card-min" v-for="(item, index) in questionList" :key="index" 
     v-show="index ==