极客观点
项目管理
HarmonyOS
demo:模拟业务逻辑http://jsrun.net/xWZKp/edit
自己写的效果样子
故意点错误的答案，再点提交之后 效果图
我现在不会弄两个class
怎么判断答案和选中的
然后分别把两个正确状态和错误状态一并显示出来
//不知道为什么大家好像没有看到demo给的链接，我就甩出下面的代码来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.scroll-wrap {
width: 200px;
border: 1px solid blue;
overflow: hidden;
}
.scroll-content {
position: relative;
transition: top 0.5s;
}
.scroll-content li {
line-height: 50px;
text-align: center;
}
.active {
border: 1px solid #ddd;
}
.Right{
border:1px solid red;
}
.Error{
border:1px solid #4ac291;
}
</style>
</head>
<body>
<div id="example">
<template>
<form class="static activeShow">
<div class="">
<span class="option-left" style="font-weight: bold;font-size:18px;">【{{duoxuan[types-1]}}】</span>
<span class="option-right">
<span class="spancolor">剩余答题时间：</span>
<span class="spantime">60</span>
</span>
</div>
<div class="option-text">
<span class="option-left">{{titleexam}}</span>
</div>
<label style="width:100%;float:left; cursor: pointer;" v-for="(item,index) in answer" v-bind:class="{Right:item.score}">
<template v-if="types==1">
<input type="radio" id="item.id" name="sex" :value="item.id" class="radio-ple" ref="ipt" @click="alocked(index,item.id,examId)"
/>{{item.answer}}
</template>
<template v-if="types==2">
<input name="Fruit" type="checkbox" ref="ipt" @click="checkeds(index,item.id,examId)" class="multiple" /> {{item.answer}}
</template>
</label>
<label style="width:100%;float:left; cursor: pointer;" v-for="item in rightlist">
<template v-if="types==3">
<input name="Fruit2" type="radio" class="radio-ple" ref="ipt" @click="judgment(index,item.id,examId)" /> {{item}}
</template>
</label>
</form>
<div class="text-align">
<button @click="getAnswer()">提交</button>
</div>
</template>
</div>
<script src="http://mooc-10050339.file.myqcloud.com/js/vue.js"></script>
<script>
var result = { "code": 100, "message": "操作成功", "data": { "isRight": 0, "answer": [{ "score": 0, "answer": "悲观厌世", "id": 27749 }, { "score": 0, "answer": "出现幻觉、妄想", "id": 27750 }, { "score": 0, "answer": "有自杀企图或行为", "id": 27751 }, { "score": 1, "answer": "兴趣狭窄", "id": 27752 }], "id": 127, "title": "自闭症患者主要表现为不同程度的言语发育障碍、人际交往障碍、行为方式刻板和（ ）几方面。", "type": 1 } }
new Vue({
el: "#example",
data: {
answer: '',
duoxuan: ['单选题', '多选题', '判断题'],
rightlist: ['正确', '错误'],
types: '',
titleexam: '',
examId: '',
checkQues: {},
},
created: function () {
var self = this;
console.log(result.data);
self.titleexam = result.data.title;
self.answer = result.data.answer;
self.types = result.data.type;
self.examId = result.data.id;
self.types = result.data.type;
},
methods: {
alocked: function (item, check, id, pageid) { //单选题
this.checkQues[id] = '' + check + ''; //已答题的区集
},
checkeds: function (items, check, id, pageid) { //多选题
var checkListDate = this.checkList;
var check = check.toString();
if (this.checkList.indexOf(check) > -1) {
let index = this.checkList.indexOf(check)
this.checkList.splice(index, 1)
var duoid = this.checkList.join();
if (duoid == "") {
}
this.checkQues[id] = '' + duoid + ''; //已答题的区集
} else {
this.checkList.push(check);
var duoid = this.checkList.join();
this.checkQues[id] = '' + duoid + ''; //已答题的区集
}
},
judgment: function (item, check, pageid) { //判断题
if (item == 0) {
this.checkQues[pageid] = 1; //已答题的区集
} else {
this.checkQues[pageid] = 0; //已答题的区集
}
},
}
})
</script>
</body>
</html>
每个选项都根据是否点击渲染is-selected类
同时is-correct类 is-error类根据正确答案和错误答案来渲染到对应元素上
is-correct 显示为绿色 同时带有is-selected is-error类的元素显示红色
点击选项后就渲染is-selected类 点击提交后再渲染is-correct is-error类