Vue+Element-ui实现考试检查答题（判断正确答题，错答，漏答）

今天实现检查答题功能做了一天了，效果如下：


我就不贴代码了，代码太长贴了也看不明白，讲下思路和关键代码就好，

	
   		  {{answer[indexs++]}}.{{items.Answer}}
	

 
   		{{answer[indexs++]}}.{{items.Answer}}

这一段用来替换效果图中提交问卷后的显示效果（不能用radio和checkbox标签的readonly或disable，readonly无效，disable会占用样式，导致后面显示题目解析时没有效果），用span代替radio和checkbox显示

接下来就是判断然后给样式了，先写好不同的样式

 .color-warning{
    color: #aa6e3a;
  }
  .color-red{
    color: red !important;
  }

  .color-green{
    color:green !important;
  }

然后写逻辑判断的方法，用样式绑定给绑定上去。

我这里是在data里面给一个变量写了个匿名函数，getClass

        	  getClass:function(thisValue,selectList,realList){//当前值，选择的值列表（兼容多选），正确值列表（兼容多选）
              let realValueList=[];
        	    for (let i=0;i

写完之后在需要显示的地方做个样式绑定调用就可以返回不同的类，从而达到不同的效果

 :class="getClass(items.Answer,item.value!=''?item.value.Answer:'',item.itemObj.AnswerList)"

完成！写完下班