做题目页面H5页面(Vue开发)

最近公司需要,要写一个可以做题目的H5小页面,需求是挺简单的(目前来说),就是可以上一题下一题的,另外不存在什么输入,全是选择题;我仔细想想觉得也不复杂,就打算用前些时候学的Vue来写(之前万年的Jquery的...),这个简单的小功能,我周末写了一天多,,,汗颜,还是太菜了..现在总结一下吧

1:题目展示和选项展示

首先这个功能不复杂,页面没有什么逻辑,我刚接到这个任务时,我脑海里第一想法就是我们常用的轮播图,结合v-if为标签进行循环迭代所有题目,默认从下标为0的题目(也就是第一题)开始展示,然后声明一个全局变量(默认也为0),结合v-if进行显示,如果当前下标等于这个全局变量时让这条题目展现出来,上一题下一题时,把当前下标的值赋予给这个全局变量,下一题的题目就展现了(上一题同理-1),因为下标是唯一的,所以有一道题目符合v-if的条件时,其他题目必定是满足不了v-if的条件的(另外题目和答案我都是定义的数组,题目一维数组,选项用的二维数组)

2:选择某一项后的样式

题目出来了,选项我们也要进行操作,当选择了某一项时我们要给它加上类,这个我用的时结合标签,也是声明了一个全局变量,把当前选择的选项的下标赋予给这个全局变量,让表达式成立;其实跟第一条的原理很相似

3:选项保存

如果用户做了几道题后,想修改之前的,那么当他返回时他之前的选择标记肯定也要在,不然他不知道自己选择了哪一个,所以我们要把他们的已选择的答案和题号保存下来,当他们上一题下一题来回点选时,之前的选择记录要展现出来;我采用的存储办法是用map()来存储,本来打算用对象但是我想把题目的下标当作键,对象的集合方法键不支持数字,就用了map();每次点击下一题时就把当前题号的下标当作键,当前选项的下标当作值,

注意:关键是怎么上一题下一题时让之前的样式还在

其实很简单,我们对每一题的下标和选项的下标都已进行了保存,当我们点上一题时就知道当前题目的下标,我们把这个下标减1,就是上一题的下标,我们通过map中的获得方法获取我们选项的下标,并把这个下标的值赋予给我们第二条中说的全局变量就行了,下一题同理下标+1

说的不清楚可能,看演示效果    预览效果(已失效..)


git地址 git下载