Vue 퀴즈 기능 구현
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)
}
},이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
