Vue實(shí)現(xiàn)答題功能
1、請(qǐng)求答題接口
2、判斷用戶是否答對(duì),答對(duì)的話跳到下一題,答錯(cuò)的話彈窗告訴用戶有錯(cuò)題,請(qǐng)重新答題
<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//第幾題問(wèn)題 }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('選對(duì)',result); this.isRight = true $(tar).addClass('right') } else { // console.log('選錯(cuò)',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('答錯(cuò)'); this.mask = false this.maskTips = true return false } else { console.log('答對(duì)了'); } } $('.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實(shí)現(xiàn)答題功能的詳細(xì)內(nèi)容,更多關(guān)于Vue答題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12Vue中使用localStorage存儲(chǔ)token并設(shè)置時(shí)效
這篇文章主要為大家介紹了Vue中使用localStorage存儲(chǔ)token并設(shè)置時(shí)效,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁(yè)面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題詳解
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-05-05Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)詳細(xì)步驟(超詳細(xì))
Electron是一個(gè)基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01表格Table實(shí)現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁(yè))
這篇文章主要為大家介紹了表格Table實(shí)現(xiàn)前端全選所有功能,包括非當(dāng)前頁(yè)的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-02-02