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"></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)
}
},
以上就是Vue實現(xiàn)答題功能的詳細內(nèi)容,更多關(guān)于Vue答題的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-cli3 配置開發(fā)與測試環(huán)境詳解
這篇文章主要介紹了vue-cli3 配置開發(fā)與測試環(huán)境詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
ant-design-vue 實現(xiàn)表格內(nèi)部字段驗證功能
這篇文章主要介紹了ant-design-vue 實現(xiàn)表格內(nèi)部字段驗證功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12

