vue编写实现考试模块答题功能单选多选
需求: 单选多选判断题。
·
需求: 单选多选判断题。
由于单选和判断性质一样,这里我就只写下单选和多选题;
大概实现这样的效果:
返回的数据格式大概是这样:
[
{
"id": "0f78fab04fab11eaabe802429c67f104",
"answeroptions": [
"A.选项一",
"B.选项二",
"C.选项三",
"D.选项四"
],
"questioncontent": "请选择下列正确选项"
},
{
"id": "0f78fab04fab11eaabe802429c67f105",
"answeroptions": [
"A.选项一",
"B.选项二",
"C.选项三",
"D.选项四"
],
"questioncontent": "请选择下列正确选项"
},
]
单选题:
<div class="e-content" v-for="(item,index) in singleChoiceInfo" :key="item.relationsubject">
<div class="e-top">
{{index+1}}、{{item.questioncontent}}
</div>
<div class="e-cent">
<div class="" v-for="(ite,ind) in item.answeroptions" :key="ind"
:class="{
btns:container1[index] == ind
}">
<div class="e-cent1" @click="check1(ite,ind,index)">{{ite}}</div>
</div>
</div>
</div>
methods:{
check1: function(itm,ind,index){
this.$set(this.container1,index,ind)
},
}
check1是个点击事件,v-for循环的singleChoiceInfo是单选题的数据来源,也就是上面的展示数据,container1是个初始化定义的空数组(用来接收点击后的参数),每次点击使用$set方法修改container1,使得视图可以及时刷新。
多选题:
<div class="e-content" v-for="(item,index) in mutipleChoiceInfo" :key="item.relationsubject">
<div class="e-top">
{{index+1}}、{{item.questioncontent}}
</div>
<div class="e-cent" v-if="container2.length>0">
<div class="" v-for="(ite,ind) in item.answeroptions" :key="ind"
:class="{
btns:container2[index].indexOf(ind)>-1
}"
>
<div class="e-cent1" @click="chenk2(ite,ind,index)">{{ite}}</div>
</div>
</div>
</div>
methods:{
chenk2: function(itm,ind,index){
let arrIndex = this.container2[index].indexOf(ind)
if(arrIndex>-1){
this.container2[index].splice(arrIndex,1)
}else{
this.container2[index].push(ind)
}
},
transformation: function(){
for(let i=0,mutI = this.mutipleChoiceInfo.length;i<mutI;++i){
this.container2.push([])
}
},
},
mounted(){
this.transformation()
}
同上check2是个点击事件,v-for循环的mutipleChoiceInfo是多选题的数据来源,也就是上面的展示数据,container2是个初始化定义的空数组(用来接收点击后的参数),我在页面加载完之后会调用一个transformation()方法,往container2中push进和数据源length相等的空数组,这样方便下一步点击事件时修改,然后通过indexOf()方法,点击事件发生时,判断点击的这个选项是否存在于对应的数组中,不存在则加入,存在则删除。
更多推荐
已为社区贡献2条内容
所有评论(0)