热搜：编程 Python Microsoft 编程语言 C++

Vue如何实现答题功能

发布时间：2022-12-30 06:35:42 来源：互联网

.

不是所有的故事都能成为你的眼睛里的色彩，因为岁月会淡化你的颜色。当你的人生路走得不平顺的时候，不要忘记了，你只是走过这条路而已，走过以后一切只能任时光处置。

1、请求答题接口

2、判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题

<div class="active_title">
      <span>{{ orderTitle }}</span>
</div>
<p v-show="toanswer" ref="question">{{ title }}</p>
<div 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">&#xe677;</i><i v-show="isRight && item.result == 1" class="iconfont icon-right">&#xe678;</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){
 consttar=e.target,
 className=e.target.className
 if(className=="answer-btn"){
  this.mask=true
  constresult=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
     returnfalse
    }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答题的资料请关注其它相关文章！

以下您可能有感兴趣的文章:

标签： 实现 Vue