最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧
1、请求答题接口
2、判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题
<div class="active_title"> <span>{{ orderTitle }}</span></div><p>{{ title }}</p><div class="answer-btns"> <span class="answer-btn">{{ item.name }} <i class="iconfont icon-wrong"></i><i class="iconfont icon-right"></i></span></div>
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 <strong style="color:transparent">来2源gaodaima#com搞(代@码&网</strong> 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答题的资料请关注gaodaima搞代码网其它相关文章！
以上就是Vue实现答题功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现答题功能
转载请注明原文链接：Vue实现答题功能
