vue实现答题考试功能(上一题下一题)

1，后端返回数据

 questionList: [{id: "1",name: "one",question: "问题1111111?",answer: "防弹少年框架的积分换深刻领会是客家话"},{id: "2",name: "two",question: "问题222222222?",answer: "分类开始动画佛丹斯科了解封惹急人都是会计发发多少咯科技和?"},{id: "3",name: "three",question: "问题333333333?",answer: "的数据库和 非打死不回复欧水回复而交话费渡水复渡水附近的时刻?"},{id: "4",name: "fore",question: "问题4444?",answer: "客家话的发生了空间是客家话?"}],

2，前端逻辑

只是实现了答题打分功能

<template><div v-for="(item, index) in questionList" :key="index"><div v-if="num === index"><h4>{{ index + 1 }}、{{ item.question }}</h4><p class="mar10">答：{{ item.answer }}</p><br /><el-radio-group v-model="allRadio[index]" @change="rideoChange"><el-radio-button label="0">0分</el-radio-button><el-radio-button label="1">1分</el-radio-button><el-radio-button label="2">2分</el-radio-button><el-radio-button label="3">3分</el-radio-button><el-radio-button label="4">4分</el-radio-button></el-radio-group><br /><!-- --------------------- --><el-row><el-col :span="3"><el-button class="mar10" @click="prex" :disabled="preDisabled">上一题</el-button></el-col><el-col :span="6"><el-button class="mar10" @click="next" :disabled="nextDisabled">下一题</el-button></el-col><el-col :span="12"><el-button type="primary" class="mar10" @click="goSubmit">提交打分任务</el-button></el-col></el-row></div></div></template><script>
export default {data() {return {preDisabled: true, //上禁用按钮nextDisabled: false, //下禁用按钮num: 0, //第几题allRadio: [], //每题的选项answerList: [], //所有题的答案或分数}}methods: {rideoChange(val) {console.log(val);this.answerList.push(val);// console.log(this.allRadio); // ["4", empty, "2"]// console.log(this.answerList); // ["4", "2"]},next() {this.preDisabled = false;if (this.num < this.questionList.length - 1) {this.num += 1;}},prex() {if (this.num === 0) {this.num = 0;} else {this.num -= 1;}},goSubmit() {this.submitDialog = true;},},watch: {//第一题和最后一题禁用按钮num(now, old) {if (now == this.questionList.length - 1) {this.nextDisabled = true;} else {this.nextDisabled = false;}if (now < 1) {this.preDisabled = true;}}}
}
</script>

vue实现答题考试功能(上一题下一题)相关推荐

怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
vue实现调查问卷一页一题，上一题下一题形式
使用了vant组件的radio 单选框官网https://youzan.github.io/vant/#/zh-CN/radio 效果图效果图做出来的效果图就是上面那样一页一题附上代码: & ...
js、jq实现答题上一题下一题
一.以下是效果图说明:第一题只有一个"下一题"按钮,中间题目有两个按钮"上一题""下一题",最后一题按钮改为"提交": ...
vue 简单实现上一题下一题问答效果
1.先来看下效果(左上展示题目数量以及当前题序号,当第一题时只有下一题按钮,未回答问题时无法点击下一题,且回答结果展示错误或正确的颜色) 2.接下来我们来看下html是怎么写的吧 <! ...
JS实现答题上一题下一题
以下是实现效果图 JS块代码 var TRUE_COUNT = 0//正确的题数var count = 10;//当前所在题数var thisURL = document.URL;var getval ...
JS-实现上一题下一题切换功能
业务背景:某个数据列表需要对其中的每行数据进行详细信息修改配置.为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作. 实现构思:有两种办法:第一种简单点的话就是不 ...
天空卫士监控行为显示叉_提示信息判断题，请判断对错！　　快捷键设置　　元贝驾考暂停上一题下一题...
1 驾驶机动车遇到这种信号灯亮时,如果已越过停止线,可以继续通行.查看本题分析 2 行驶在高速公路上遇大雾视线受阻时,应当立即紧急制动停车.查看本题分析 3 机动车仪表板上(如图所示)亮表示发动机可能 ...
php 答题一页一题,微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题...
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容代码 answer.wxml 全民答题总共1/10题 {{index+1}}: {{item.t ...
前端考试答题，下一题，上一题
<template><div class="box"><div class="wrap"><p class=" ...

vue实现答题考试功能(上一题下一题)

1，后端返回数据

2，前端逻辑

vue实现答题考试功能(上一题下一题)相关推荐

最新文章

热门文章