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

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 == idx"><div class="card-top">{{ item.questionName }}</div><div class="card-select"><!-- 如果选择的答案未A且正确结果为A,其他选项同理--><div :class="[item.isTrue && item.answerCorrect == 'A' ? 'yes' : '',!item.isTrue && item.result == 'A' ? 'no' : '',!item.isTrue && item.answerCorrect == 'A' && item.result? 'yes': '',]" class="select-min" v-if="item.answerA" @click="handleCilck('A', index)"><div class="select-con">A.{{ item.answerA }}</div></div></div></div><!-- 按钮部分 --><div class="bot-but"><div class="but-show" @click="back()" v-if="idx != 0 && isShow" :class="idx == 0 ? 'but-show' : 'before-back'"><!-- 上一题 -->上一题</div><div class="next" @click="next(idx)" v-if="isShow" :class="idx == 0 ? 'but-show' : 'before-next'"><!-- 下一题 -->下一题</div><!-- 提交 --><div class="next" v-if="!isShow" @click="submit(idx)" :class="idx == 0 ? 'next' : 'but-show'"><!-- 提交 -->提交</div></div>

3.继续css样式

   <--选取结果的样式-->
.select-min {width: 100%;min-height: 85px;border-radius: 50px;margin: 35px 0px;padding: 0px 35px;font-size: 32px;background: #e4efff;display: flex;align-items: center;&.yes {background: #70c9ad;}&.no {background: #ed8254;}.select-con {line-height: 45px;}}<--所有按钮的样式-->.bot-but {width: 100%;height: 90px;line-height: 90px;text-align: center;position: fixed;bottom: 200px;display: flex;.but-show {width: 70%;height: 100%;margin: 0 auto;color: #ffffff;font-size: 36px;border-radius: 50px;}.next {width: 70%;height: 100%;margin: 0 auto;background: #fdc003;color: #ffffff;font-size: 36px;border-radius: 50px;}.before-next {width: 40%;height: 100%;margin: 0 auto;color: #ffffff;font-size: 36px;border-radius: 50px;background: #fdc003;}.before-back {width: 40%;height: 100%;margin: 0 auto;color: #4c69e4;font-size: 36px;border-radius: 50px;background: #ffffff;}}

4.处理数据环节

1.获取题目数据这个忽略(记得先定义一个 参数 ，方便后面处理 index,我定义的是idx 哦)
2.我根据我这个接口数据返回数据，往里面加了2个参数，如下：item.result = ""; //选择的结果item.isTrue = false; //结果是否正确
3. 我们来看下next 方法（调用方法时传参为ids)next(index) {if (!this.questionList[index].result ||this.questionList[index].result == "" ||this.questionList[index].result == null) {return;} else {this.idx++;}// 当前页等于最后一题 下一题按钮隐藏if (this.idx == this.questionList.length - 1) {return (this.isShow = false);} else {return (this.isShow = true);}},
4.返回直接处理index就好back() {this.idx--;},
5.接下来就是点击上一题 下一题的啦handleCilck(str, i) {const item = this.questionList[i];if (item.result) {return;}if (item.answerCorrect == str) {item.result = str;item.isTrue = true;this.num++;} else {item.result = str;item.isTrue = false;}},6.最后提交按钮submit(index) {if (!this.questionList[index].result ||this.questionList[index].result == "" ||this.questionList[index].result == null) {return;} else {//提交表单}},

vue 简单实现上一题下一题问答效果相关推荐

vue实现调查问卷一页一题，上一题下一题形式
使用了vant组件的radio 单选框官网https://youzan.github.io/vant/#/zh-CN/radio 效果图效果图做出来的效果图就是上面那样一页一题附上代码: & ...
js、jq实现答题上一题下一题
一.以下是效果图说明:第一题只有一个"下一题"按钮,中间题目有两个按钮"上一题""下一题",最后一题按钮改为"提交": ...
怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
php下一页的代码,PHP简单实现上一页下一页功能示例
本文实例讲述了PHP简单实现上一页下一页功能.分享给大家供大家参考,具体如下: 思路整理: 现在好多人用id的增1和减1实现上一篇和下一篇,但是难道文章ID不会断了吗?所以你要知道上个ID和个ID是多 ...
jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
vue实现答题考试功能(上一题下一题)
1,后端返回数据 questionList: [{id: "1",name: "one",question: "问题1111111?",an ...
JS-实现上一题下一题切换功能
业务背景:某个数据列表需要对其中的每行数据进行详细信息修改配置.为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作. 实现构思:有两种办法:第一种简单点的话就是不 ...
JS实现答题上一题下一题
以下是实现效果图 JS块代码 var TRUE_COUNT = 0//正确的题数var count = 10;//当前所在题数var thisURL = document.URL;var getval ...
vue手写上一页下一页
上一页: this.openIsDisabled=true;---------->当前为第一页时关闭上一页按钮 this.closeIsDisabled=false;-----------> ...

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

vue 简单实现上一题下一题问答效果相关推荐

最新文章

热门文章