Vue实现答题功能

 更新时间:2021年06月23日 10:18:12   作者:sryhx  
最近接手做一个前端小项目,基于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实现答题功能的详细内容,更多关于Vue答题的资料请关注脚本之家其它相关文章!

相关文章

  • vue如何获取点击事件源的方法

    vue如何获取点击事件源的方法

    本篇文章主要介绍了vue如何获取点击事件源的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue 响应式系统依赖收集过程原理解析

    Vue 响应式系统依赖收集过程原理解析

    Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ,为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表,这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下
    2022-06-06
  • Vue.js下拉菜单组件使用方法详解

    Vue.js下拉菜单组件使用方法详解

    这篇文章主要为大家详细介绍了Vue.js下拉菜单组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue在路由中验证token是否存在的简单实现

    vue在路由中验证token是否存在的简单实现

    今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue开发table数据合并实现详解

    vue开发table数据合并实现详解

    这篇文章主要为大家介绍了vue开发table数据合并实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue项目中$t()的意思是什么

    vue项目中$t()的意思是什么

    这篇文章主要介绍了vue项目中$t()的意思是什么,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue cli webpack中使用sass的方法

    vue cli webpack中使用sass的方法

    这篇文章主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下
    2018-02-02
  • vue实例的选项总结

    vue实例的选项总结

    这篇文章主要介绍了Vue实例的选项有哪些,文中讲解非常细致,代码帮助大家更好的学习,感兴趣的朋友可以了解下
    2020-06-06
  • vue项目实现图片懒加载的简单步骤

    vue项目实现图片懒加载的简单步骤

    懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验,这篇文章主要给大家介绍了关于vue项目实现图片懒加载的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue全屏事件开发详解

    vue全屏事件开发详解

    这篇文章主要为大家详细介绍了vue全屏事件的开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论