vue实现选择题功能,vue简答题
最近接手做一个前端小项目，基于某视频剪辑软件实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧
1、请求答题接口
2、判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题
div class=active_title
span{{订单标题} span
/div
p v-show=回答 ref=问题“{ title } }/p
div class= answer-btns @ click= answer click($ event)
span class= answer-BTN :class= ` $ {是正确的项目.结果==1？right : } ` v-for= item in answer :data-result= item。结果“{ item。name } } I class= icon font icon-error # xe 677；/ii v-show=是正确的项目。result==1 class= icon font icon-right # xe 678；/i
/span
/div
getAllData() {
这个. axios.get(答题接口).然后((res)={
if(parse int(RES . data。errcode)=0){
this.allData=res.data.data
如果(这个。所有数据。问题。长度0){
this.toanswer=true
}
这个。标题=这个。所有数据。问题[0].标题//第几题
这个。回答=这个。所有数据。问题[0].ansowner//第几题问题
}否则{
这个.吐司=这个.$createToast({
txt: res.data.message，
类型：" txt "
})
this.toast.show()
}
}).catch((err)={
console.log(错误)
})
},
回答点击(e){
consttar=e.target，
className=e.target.className
if(className==answer-btn){
this.mask=true
constresult=tar.dataset.result
if(result==1){
//console.log(选对，结果);
this.isRight=true
$(焦油)。addClass(右)
}否则{
//console.log(选错，结果);
this.isRight=true
this.isWrong=true
$(焦油)。addClass(错误)
setTimeout(()={
this.maskTips=true
},1200);
}
setTimeout(()={
this.clickNum
if(this.clickNum2){
this.clickNum=2
如果(this.isWrong){
console.log(答错);
this.mask=false
this.maskTips=true
返回错误的
}否则{
console.log(答对了);
}
}
$(.回答——BTN).removeClass(错误)
这个。订单标题=这个。顺序标题【这个。点击数量]
this.isRight=this.mask=false
这个。标题=这个。所有数据。质疑【这个。点击数字.标题
这个。回答=这个。所有数据。质疑【这个。点击数字.房主
},1200)
}
},
以上就是某视频剪辑软件实现答题功能的详细内容，更多关于某视频剪辑软件答题的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。