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

