demo: simulates business logic http://jsrun.net/xWZKp/edit
what the effect looks like when you write it yourself
I won"t get two class now
how to judge the answer and the selected
, and then display both the correct state and the error state
/ / I don"t know why you don"t seem to see the link given by demo, so I throw out the following code.
<!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 -sharpddd;
}
.Right{
border:1px solid red;
}
.Error{
border:1px solid -sharp4ac291;
}
</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: "-sharpexample",
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>