纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue答题 Vue实现答题功能

sryhx   2021-06-23 我要评论
想了解Vue实现答题功能的相关内容吗,sryhx在本文为您仔细讲解Vue答题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue答题,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)
     }
  },

相关文章

猜您喜欢

  • JVM执行子系统 分析JVM的执行子系统

    想了解分析JVM的执行子系统的相关内容吗,IT王小二在本文为您仔细讲解JVM执行子系统的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JVM,执行子系统,下面大家一起来学习吧。..
  • .Net Core Autofac替换DI容器 .Net Core中使用Autofac替换自带的DI容器的示例

    想了解.Net Core中使用Autofac替换自带的DI容器的示例的相关内容吗,畅饮无绪在本文为您仔细讲解.Net Core Autofac替换DI容器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:.Net,Core,Autofac替换DI容器,Autofac替换.net,core,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.mwhsoft.com 【绿色软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式