Vue实现答题功能

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\"></i><i v-show=\"isRight && item.result == 1\" 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
           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答题的资料请关注其它相关文章！