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) } },
以上就是Vue實現答題功能的詳細內容,更多關於Vue答題的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Vue 不定高展開動效原理詳解
- Vue 實現可視化拖拽頁面編輯器
- Python中Scrapy+adbapi提高數據庫寫入效率實現
- Vue+elementUI實現動態展示列表的數據
- 計算屬性和偵聽器詳情