vue考试链接重置(Vue实现答题功能)
类别:编程学习 浏览量:1678
时间:2021-10-23 10:56:24 vue考试链接重置
Vue实现答题功能1、请求答题接口
2、判断用户是否答对,答对的话跳到下一题,答错的话弹窗告诉用户有错题,请重新答题
<li class="active_title"> <span>{{ orderTitle }}</span> </li> <p v-show="toanswer" ref="question">{{ title }}</p> <li class="answer-btns" @click="answerClick($event)"> <span class="answer-btn" :class="`${isRight && item.result == 1?'right':''}`" v-for="item in answer" :data-result='item.result'>{{ item.name }} <i class="iconfont icon-wrong"></i><i v-show="isRight && item.result == 1" class="iconfont icon-right"></i> </span> </li>
getAllData() { this.$axios.get(答题接口).then((res)=>{ if(parseInt(res.data.errCode)>=0){ this.allData=res.data.data if(this.allData.question.length > 0) { this.toanswer = true } this.title = this.allData.question[0].title//第几题 this.answer = this.allData.question[0].answner//第几题问题 }else{ this.toast = this.$createToast({ txt: res.data.message, type: 'txt' }) this.toast.show() } }).catch((err)=>{ console.log(err) }) }, answerClick(e) { const tar = e.target, className = e.target.className if(className == "answer-btn") { this.mask = true const result = tar.dataset.result if(result == 1){ // console.log('选对',result); this.isRight = true $(tar).addClass('right') } else { // console.log('选错',result); this.isRight = true this.isWrong = true $(tar).addClass('wrong') setTimeout(() => { this.maskTips = true }, 1200); } setTimeout( () => { this.clickNum ++ if(this.clickNum > 2) { this.clickNum = 2 if(this.isWrong) { console.log('答错'); this.mask = false this.maskTips = true return false } else { console.log('答对了'); } } $('.answer-btn').removeClass('wrong') this.orderTitle = this.orderTitles[this.clickNum] this.isRight = this.mask = false this.title = this.allData.question[this.clickNum].title this.answer = this.allData.question[this.clickNum].answner },1200) } },
以上就是Vue实现答题功能的详细内容,更多关于Vue答题的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vuevlog制作软件(Vue实现Dialog封装)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue界面自动生成(Vue中实现3D标签云的详细代码)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue组件详解(Vue的方法和属性案例详解)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue统计代码行数(vue实现计数器简单制作)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
- 淘宝支持账号名修改,网友 终于可以 重新做人 了(淘宝支持账号名修改)
- 盘点那些年让人称奇的年终奖 最后一个赢辣条毫无悬念(盘点那些年让人称奇的年终奖)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)