vue实现单选做题根据对错标色，作对跳转下一题，实现思路详解

vue实现单选做题效果详解

最近在做一个答题项目，废了好多时间，经过折腾和在大佬的指导下，终于清晰的了解逻辑，如果你也遇到此类问题，不妨先看看我的思路，看完点个赞，那是继续跟新的动力

此案例是使用swiper以及vue来完成的。

需求分析，当点击了正确答案，选项背景色成指定的颜色，并且有一个打勾的效果，不能在选择其他选项，错误选项背景色改成对应的颜色，打上一个小叉，答对了自动切换到下一个题目，点击选项显示对应的答案及其解析。

主要涉及的知识点，vue 动态绑定class ,条件渲染，话不多说，首先先来看看效果

先详解在，在上源码，

先看布局，这里可以自己根据需求来布局

  <div  v-cloak id='app' class="recommendPage"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item, index) in tmList" :key="index"><div class="box"><van-divider class="qes-num"> {{ index + 1 }}/{{tmList.length}}</van-divider><p class="title">{{item.title}}</p><div class="anlist"><ul><li :class="{'success-active': item.userAnswer === subIndex,'error-active':item.userAnswer!==item.correct && item.userAnswer === subIndex}"v-for="(sub, subIndex) in item.answer" :key="sub.id" class="lis"@click="chechan(item,sub,  index,subIndex)">{{ sub }}</li></ul></div><div v-if="isShowAnswer===index||item.userAnswer!==-1"><div class="mar20">正确答案: <span class="redcol"> {{ item.answer[item.correct] }}</span></div><div class="mar20 pa20">解析: {{ item.content }}</div></div></div></div></div></div>

再看逻辑

<script>const app = new Vue({el: "#app",data() {return {swiper: {},isShowAnswer: -1,// 控制是否显示解析isActive: -1,tmList: [{id: 1,title: '1、1947年12月，毛泽东在《目前形势和我们的任务》中总结出十大军事原则，其核心是( )',correct: 0,answer: ['A.集中优势兵力，各个歼灭敌人','B.诱敌深入，积极防御','C.多种作战形式，适时转变','D.避其主力，打其虚弱'],userAnswer: -1,  content: "毛泽东于1947年12月25日在中共中央召开的会议上所做《目前形势和我们的任务》的报告中正式提出十大军事原则。十大军事原则是一个有机的整体，其核心是强调集中优势兵力打歼灭战", },{id: 2,title: '2、中国宋代哲学家朱熹提出“理在事先”，把“天理”说成是世界万物的本原。这是一种( )',correct: 1,answer: ['A.主观唯心主义观点', 'B.客观唯心主义观点', 'C.朴素唯物主义观点', 'D.形而上学唯物主义观点'],userAnswer: -1,  content: "主观唯心主义认为物质是某种主观精神的产物，客观唯心主义将物质归结为某种客观精神的产物。结合题干可得，“理在事先”这种“天理”观属于客观唯心主义。",},{id: 3,title: '3、毛泽东在《新民主主义论》中提出的新民主主义文化纲领是( )',correct: 2,answer: ['A.为抗战服务','B.为工农兵服务','C.民族的、科学的、大众的文化','D.古为今用，洋为中用'],userAnswer: -1, content: "新民主主义的文化就是“无产阶级领导的，人民大众的，反帝反封建的文化”。这种文化是无产阶级领导的民族的、科学的、大众的文化。",},{id: 4,title: '4、下列选项中，强调外因在事物发展中起着重要作用的是( )',correct: 2,answer: ['A.出淤泥而不染','B.威武不能屈，贫贱不能移','C.近朱者赤，近墨者黑','D.常在河边走，就是不湿鞋'],userAnswer: -1, content: "在因果联系中，内因是事物变化的根据，外因是事物变化的条件。“近朱者赤，近墨者黑”强调的是外因在事物变化发展中的重要作用。",}],}},methods: {chechan(v1, v2, index, index1) {if (v1.userAnswer !== -1) return // 代表已经答过了this.isActive = index1//选中当前选项this.isShowAnswer = index //选完显示答案和解析v1.userAnswer = index1;   //此处非常关键，已经改变了 tmList数组if (index1 === v1.correct) {this.nextto();} console.log("点击的答案" + v1, "正确答案" + `${v2}`, "第" + `${index + 1}` + "题", `点击了第${index + 1}题的第${index1 + 1}答案`);//判断最后一个  此判断只适用于最后一个题目的答案 和没一道题的 选项唯一   根据自己的业务判断最后一个题let clicklast = v1.content;let arrlast = this.tmList[this.tmList.length-1].content;if(clicklast==arrlast){alert("恭喜你完成答题")}},nextto() {//获取当前索引let thisindex = this.swiper.activeIndex;this.swiper.slideTo(thisindex + 1, 1000, false);},},mounted() {let that = this;that.swiper = new Swiper('.swiper-container', {initialSlide: 0, //默认显示autoplay:false,//等同于以下设置on: {touchStart: function () {// alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide},},})},created() {}});
</script>

1.先来看最简单的显示对应题目的解析和答案

isShowAnswer===index||item.userAnswer!==-1

首先isShowAnswer 默认值为-1.index就是当前题目的下标，只有当isShowAnswer和下标相等的时候，就显示，所以在点击事件中只需要将isShowAnswer 与当前题目的下标相等即可。this.isShowAnswer = index，显然这样是可以显示对应的题目的解析答案，当我们切下一个题目的时候，在滑动回来上一题，刚才显示的答案又被影藏了，显然是下标不等了，观察数据结构，每一个题目中都有一个userAnswer: -1,的字段，那么我们点击选项的时候，我们就将这个值变成点击的答案的下标，v1.userAnswer = index1;往上自己了解这一句，这一句非常关键，这里的参数v1也就是题目的每一条数据，神奇的是，你可以通过打印，如果你这样赋值之后，加入我们点击的是第一道题目的第一个选项，题目数组中的第一条数据将变成

 {id: 1,title: '1、1947年12月，毛泽东在《目前形势和我们的任务》中总结出十大军事原则，其核心是( )',correct: 0,answer: ['A.集中优势兵力，各个歼灭敌人','B.诱敌深入，积极防御','C.多种作战形式，适时转变','D.避其主力，打其虚弱'],userAnswer: 0,  content: "毛泽东于1947年12月25日在中共中央召开的会议上所做《目前形势和我们的任务》的报告中正式提出十大军事原则。十大军事原则是一个有机的整体，其核心是强调集中优势兵力打歼灭战",

userAnswer: 0,

所以我们在加上一个条件 ||item.userAnswer!==-1，这样当我们做过题目之后，每条数据的userAnswer字段经等于点击答案的下标，不在是-1,从而只要我们答题过后，切换回来，刚才显示的答案依然还是显示出来。

2.再看正确答案标色
我们给每一个答案都动态绑定一个一个样式

:class="{
'success-active': item.userAnswer === subIndex,
'error-active':item.userAnswer!==item.correct && item.userAnswer === subIndex}"
v-for="(sub, subIndex) in item.answer" :

从字面上不难看出，一个是正确的样式，一个是错误的样式。

item.userAnswer === subIndex

从点击事件中不难看出 v1.userAnswer = index1;点击了哪个答案就让他添加上success-active的样式，那有的小伙伴想。万一我点击的是错误的答案呢，不要着急，仔细看error-active 它还需要&& 一个条件才成立item.userAnswer!==item.correct
从数据结构中不难看出

 {id: 1,title: '1、1947年12月，毛泽东在《目前形势和我们的任务》中总结出十大军事原则，其核心是( )',correct: 0,answer: ['A.集中优势兵力，各个歼灭敌人','B.诱敌深入，积极防御','C.多种作战形式，适时转变','D.避其主力，打其虚弱'],userAnswer: -1,  content: "毛泽东于1947年12月25日在中共中央召开的会议上所做《目前形势和我们的任务》的报告中正式提出十大军事原则。十大军事原则是一个有机的整体，其核心是强调集中优势兵力打歼灭战",
},

correct字段标识正确答案的选项，0就是`answe`r中的第一项，那表示第一个就是正确答案

所以取值正确答案即为 正确答案: <span class="redcol"> {{ item.answer[item.correct] }}</span>

比如第一题，当我们本来正确答案是A，假如我蛮点击了B，那此时 userAnswer是不是等于了1 ，1不等于correct是不是代表我们选择错误的答案。所以只要保证item.userAnswer!==item.correct && item.userAnswer === subIndex 说明我们点击的就是错误的。

最后再看，

  if (v1.userAnswer !== -1) return

本来每一个数组中的每一条数据userAnswer都是1-只要点击过后，userAnswer就等于点击的答案下标，所以下一次点击的时候，表示这个题目已点击过了，直接return不在往下执行。

最后说一下打勾打叉。其实就是条件添加上对用的class之后，我们给当前类添加一个伪类样式即可。

  .anlist .success-active::before{position: absolute;content: "✔";top: 8px;left: 2px;font-size: 25px;color: #80e4ba;}

   .anlist .error-active::before{position: absolute;content: "×";top: 8px;left: 2px;font-size: 35px;color: #80e4ba;}

是不是没有想象中的那么复杂。

不是到这里就完了，一些小伙伴会问。我们后端返回的数据结构不是这样的呀，里面就没有userAnswer=-1的字段呀，那这个就很简单了，拿到数据遍历。像每一条数据中增加这样的一个字段，那不就完事了。然后还有一种可能，correct正确答案给的不是下标那怎么办，举个例子

   {id: 3,title: '3、毛泽东在《新民主主义论》中提出的新民主主义文化纲领是( )',correct: 2,answer: ['A.为抗战服务','B.为工农兵服务','C.民族的、科学的、大众的文化','D.古为今用，洋为中用'],userAnswer: -1, content: "新民主主义的文化就是“无产阶级领导的，人民大众的，反帝反封建的文化”。这种文化是无产阶级领导的民族的、科学的、大众的文化。",},

此题目不难看出正确答案就是C
如果后端给的数据书correct：'C.民族的、科学的、大众的文化' 那也简单，拿correct 去answer数组中匹配，找到对应的下标即可。

总一，万变不离其中，你难道后台数据，将你的数据格式处理成上面的格式完事，无非就是遍历，追加字段。匹配一系列问题，差不多都是数组对象的简单玩法

                        重要事情说三遍，写了我一个小时，做个好人**点赞**   **点赞**   **点赞***唯一跟新的动力*

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script><link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css"><script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"> </script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/><script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script><title>单选做题</title><style>* {padding: 0;margin: 0;}[v-cloak]{display: none}#app{width: 100%;height: 100%;overflow: scroll;}ul li {list-style: none;}/* swiper */.swiper-container {width: 100vw;height: 100vh;background: #fff;}.swiper-container .swiper-slide {width: 100%;height: 100%;background: #fff;color: #000;font-size: 16px;}/* swiper */.box {width: 94%;margin: 0 auto;}.qes-num {margin-left: 8px;}.anlist {margin-top: 15px;}.anlist ul li {padding: 10px 0px;background: #f6f6f6;margin: 5px;border-radius: 7px;text-indent: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.anlist .success-active {background: #021a02ad;color: #fff;position: relative;}.anlist .success-active::before{position: absolute;content: "✔";top: 8px;left: 2px;font-size: 25px;color: #80e4ba;}.anlist .error-active {background: #c15a5a;color: #fff;position: relative;}.anlist .error-active::before{position: absolute;content: "×";top: 8px;left: 2px;font-size: 35px;color: #80e4ba;}.van-radio {margin: 10px 0px;}.redcol {color: red;}.mar20 {margin: 20px auto;}.pa20{background: #7c937014;padding: 10px;border-radius: 10px;font-size: 14px;color: #999;line-height: 28px;}</style>
</head><body><div  v-cloak id='app' class="recommendPage"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item, index) in tmList" :key="index"><div class="box"><van-divider class="qes-num"> {{ index + 1 }}/{{tmList.length}}</van-divider><p class="title">{{item.title}}</p><div class="anlist"><ul><li :class="{'success-active': item.userAnswer === subIndex,'error-active':item.userAnswer!==item.correct && item.userAnswer === subIndex}"v-for="(sub, subIndex) in item.answer" :key="sub.id" class="lis"@click="chechan(item,sub,  index,subIndex)">{{ sub }}</li></ul></div><div v-if="isShowAnswer===index||item.userAnswer!==-1"><div class="mar20">正确答案: <span class="redcol"> {{ item.answer[item.correct] }}</span></div><div class="mar20 pa20">解析: {{ item.content }}</div></div></div></div></div></div>
</body>
<script>const app = new Vue({el: "#app",data() {return {swiper: {},isShowAnswer: -1,// 控制是否显示解析isActive: -1,tmList: [{id: 1,title: '1、1947年12月，毛泽东在《目前形势和我们的任务》中总结出十大军事原则，其核心是( )',correct: 0,answer: ['A.集中优势兵力，各个歼灭敌人','B.诱敌深入，积极防御','C.多种作战形式，适时转变','D.避其主力，打其虚弱'],userAnswer: -1,  content: "毛泽东于1947年12月25日在中共中央召开的会议上所做《目前形势和我们的任务》的报告中正式提出十大军事原则。十大军事原则是一个有机的整体，其核心是强调集中优势兵力打歼灭战", },{id: 2,title: '2、中国宋代哲学家朱熹提出“理在事先”，把“天理”说成是世界万物的本原。这是一种( )',correct: 1,answer: ['A.主观唯心主义观点', 'B.客观唯心主义观点', 'C.朴素唯物主义观点', 'D.形而上学唯物主义观点'],userAnswer: -1,  content: "主观唯心主义认为物质是某种主观精神的产物，客观唯心主义将物质归结为某种客观精神的产物。结合题干可得，“理在事先”这种“天理”观属于客观唯心主义。",},{id: 3,title: '3、毛泽东在《新民主主义论》中提出的新民主主义文化纲领是( )',correct: 2,answer: ['A.为抗战服务','B.为工农兵服务','C.民族的、科学的、大众的文化','D.古为今用，洋为中用'],userAnswer: -1, content: "新民主主义的文化就是“无产阶级领导的，人民大众的，反帝反封建的文化”。这种文化是无产阶级领导的民族的、科学的、大众的文化。",},{id: 4,title: '4、下列选项中，强调外因在事物发展中起着重要作用的是( )',correct: 2,answer: ['A.出淤泥而不染','B.威武不能屈，贫贱不能移','C.近朱者赤，近墨者黑','D.常在河边走，就是不湿鞋'],userAnswer: -1, content: "在因果联系中，内因是事物变化的根据，外因是事物变化的条件。“近朱者赤，近墨者黑”强调的是外因在事物变化发展中的重要作用。",}],}},methods: {chechan(v1, v2, index, index1) {if (v1.userAnswer !== -1) return // 代表已经答过了this.isActive = index1//选中当前选项this.isShowAnswer = index //选完显示答案和解析v1.userAnswer = index1;   //此处非常关键，已经改变了 tmList数组if (index1 === v1.correct) {this.nextto();} console.log("点击的答案" + v1, "正确答案" + `${v2}`, "第" + `${index + 1}` + "题", `点击了第${index + 1}题的第${index1 + 1}答案`);//判断最后一个  此判断只适用于最后一个题目的答案 和没一道题的 选项唯一   根据自己的业务判断最后一个题let clicklast = v1.content;let arrlast = this.tmList[this.tmList.length-1].content;if(clicklast==arrlast){alert("恭喜你完成答题")}},nextto() {//获取当前索引let thisindex = this.swiper.activeIndex;this.swiper.slideTo(thisindex + 1, 1000, false);},},mounted() {let that = this;that.swiper = new Swiper('.swiper-container', {initialSlide: 0, //默认显示autoplay:false,//等同于以下设置on: {touchStart: function () {// alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide},},})},created() {}});
</script></html>

vue实现单选做题根据对错标色，作对跳转下一题，实现思路详解相关推荐

2023年MathorCup 高校数学建模挑战赛-A 题量子计算机在信用评分卡组合优化中的应用-思路详解（模型代码答案）
一.题目简析运筹优化类题目,不同于目标规划,该题限制了必须使用量子退火算法QUBO来进行建模与求解.本身题目并不难,但是该模型较生僻,给出的参考文献需要耗费大量时间去钻研.建议擅长运筹类题目且建模能 ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
2021年美赛A题思路详解
2021年数模美赛A题思路详解题目分析思路详解由于和队友思路不一致,导致最后我的思路只算了前两问,而后几问用了我认为离题的PCA(主成分分析)的方法,我的建模思路没有得到完全实现,总体情况很不满 ...
【2023年第十一届泰迪杯数据挖掘挑战赛】B题：产品订单的数据分析与需求预测建模及python代码详解问题一
相关链接 [2023年第十一届泰迪杯数据挖掘挑战赛]B题:产品订单的数据分析与需求预测建模及python代码详解问题一 [2023年第十一届泰迪杯数据挖掘挑战赛]B题:产品订单的数据分析与需求预测 ...
【2023年第十一届泰迪杯数据挖掘挑战赛】B题：产品订单的数据分析与需求预测建模及python代码详解问题二
相关链接 [2023年第十一届泰迪杯数据挖掘挑战赛]B题:产品订单的数据分析与需求预测建模及python代码详解问题一 [2023年第十一届泰迪杯数据挖掘挑战赛]B题:产品订单的数据分析与需求预测 ...
vue单页面跳页没有数据了_详解刷新页面vuex数据不消失和不跳转页面的解决
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题刷新刷新相当与 ...
神武手游做任务链服务器维护,神武手游跑环攻略跑环注意事项详解
神武手游游戏中有个快速获得经验的方法,就是跑环.跑环是游戏中的一大经验来源,那么游戏中如何才能够进行跑环呢?跑环有什么捷径呢?下面小编为大家详解一下游戏中的跑环攻略,以及跑环注意事项.希望能够帮助大家 ...
openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解
文章目录 1. VectorLayer矢量图层的理解 2. openlayers通过坐标点画中国地图 2.1 准备边界的 data 数据 2.2 准备 china.json 的数据文件 2.3 实现区 ...

vue实现单选做题根据对错标色，作对跳转下一题，实现思路详解

vue实现单选做题效果详解

vue实现单选做题根据对错标色，作对跳转下一题，实现思路详解相关推荐

最新文章

热门文章