这篇文章主要给大家分享怎样用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">&#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) {
  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实现选择题答题功能的介绍，有需要的朋友可以参考上述代码，希望对大家学习有帮助，想要了解更多请搜索群英网络以前的文章或继续浏览其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.js 调试 的方式有什么，怎样调式方便？

  Node.js 调试 的方式有什么，怎样调式方便？对于Node 代码调式，很多朋友只会用console.log 这种带有侵入性的方法，但是其实Node.js 也可以做到跟浏览器调试一样的方便的，对此本文给大家分享两种常见的 Node.js 的方式，需要的朋友可以参考了解看看。

• 如何利用JS制作上传图片并可选择的功能

  这篇文章主要为大家详细介绍了vue+js实现微信上传图片选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Events模块用来做什么，如何弄明白EventEmitter对象

  Events是Node中的一个很重要的核心模块，Stream,网络，文件系统统统都是继承自这个模块。Streams模块就是继承自EventEmitter，所以说弄明白Events模块，特别是EventEmitter对象,对于理解Node中的很多模块都是有好处的。Stream非常擅长处理数据，无论是读，写或者是转换。比如，你可以用Stream接收数据库中的数据，将其流出到csv的流中，导出成

• Vue中v-for的使用时是否有key有何不同

  这篇文章主要为大家介绍了v-for中的:key，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• react的setstate是同步还是异步？

  这篇文章主要给大家分享的是关于react的setstate的内容，对于setstate是同步还是异步的问题，一些朋友可能不是理解，对此我们通过示例来了解一下，感兴趣的朋友就继续往下看吧。