欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)答題功能

 更新時間:2021年06月23日 10:18:12   作者:sryhx  
最近接手做一個前端小項目,基于vue實現(xiàn)答題功能,具體功能有判斷用戶是否答對,答對的話跳到下一題,答錯的話彈窗告訴用戶有錯題,請重新答題,功能非常人性化,對實現(xiàn)代碼感興趣的朋友一起看看吧

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實現(xiàn)答題功能的詳細(xì)內(nèi)容,更多關(guān)于Vue答題的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • VUE?axios每次請求添加時間戳問題

    VUE?axios每次請求添加時間戳問題

    這篇文章主要介紹了VUE?axios每次請求添加時間戳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue常見組件間通信方案及典型應(yīng)用場景詳解

    Vue常見組件間通信方案及典型應(yīng)用場景詳解

    這篇文章主要為大家介紹了Vue常見組件間通信方案及典型應(yīng)用場景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue-cli3.0+element-ui上傳組件el-upload的使用

    vue-cli3.0+element-ui上傳組件el-upload的使用

    這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Vue中使用localStorage存儲token并設(shè)置時效

    Vue中使用localStorage存儲token并設(shè)置時效

    這篇文章主要為大家介紹了Vue中使用localStorage存儲token并設(shè)置時效,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue打印功能實現(xiàn)的兩種方法總結(jié)

    vue打印功能實現(xiàn)的兩種方法總結(jié)

    在項目中,有時需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下
    2021-06-06
  • Vue項目中使用iView組件庫設(shè)置樣式不生效的解決方案

    Vue項目中使用iView組件庫設(shè)置樣式不生效的解決方案

    這篇文章主要介紹了Vue項目中使用iView組件庫設(shè)置樣式不生效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue3實現(xiàn)國際化的過程與遇到的問題詳解

    vue3實現(xiàn)國際化的過程與遇到的問題詳解

    像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)國際化的過程與遇到的問題的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))

    Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))

    Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • 探討Vue.js的組件和模板

    探討Vue.js的組件和模板

    指令是Vue.js中一個重要的特性, 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板,需要的朋友參考下吧
    2017-10-10
  • 表格Table實現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁)

    表格Table實現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁)

    這篇文章主要為大家介紹了表格Table實現(xiàn)前端全選所有功能,包括非當(dāng)前頁的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2024-02-02

最新評論