tyjs_web/test/index.vue

<template>
   <div class="exam-content">
     <el-card class="box-card" v-for="(currentQuestion, index1) in datalist" :key="index1">
       <div slot="header" class="clearfix">
         第{{index1+1}}题 : <span v-html="currentQuestion.title"></span>
       </div>

       <div class="q-single">
         <!-- 判断题 -->

         <div class="answer" v-if="currentQuestion.type==1">
           <div class="answer-item" v-for="(item, index) in currentQuestion.choice" :key="index">
             <el-radio :label="index+1">{{transformChar[index+1]+'、 '+item}}</el-radio>
           </div>
           <span style="margin-top: 10px;"> 正确答案：{{currentQuestion.result==1?'正确':'错误'}}</span>
         </div>

         <!-- 当选题 -->
         <div class="answer" v-if="currentQuestion.type==2">
           <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
             <el-radio :label="index+1">{{transformChar[index+1]+'、 '+item}}</el-radio>
           </div>

           <span style="margin-top: 10px;"> 正确答案：{{transformChar[currentQuestion.result]}} </span>
         </div>

         <!-- 多选题 -->
         <div class="answer" v-if="currentQuestion.type==3">
           <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
              <el-checkbox  :label="index+1">{{transformChar[index+1]}} '、 '{{item}}</el-checkbox>
           </div>

           <span style="margin-top: 10px;"> 正确答案：{{getMulResult(currentQuestion.result)}} </span>
         </div>
       </div>
     </el-card>
   </div>
</template>

<script>

  export default {
    filters:{
      getType( val ){
        const d = {1:'判断题', 2:'单选题', 3:'多选题'}
        return d[val]
      }
    },
    data() {
      return {
        datalist:[],
        transformChar: ["","A", "B", "C", "D","E"],
      }
    },
    created(){
      let id = this.$route.query.id
      var jsondata = require(`./${id}.json`);
      let list = jsondata.RECORDS.map( item =>{
        item.choice= [];
        for( let i=0;i<5;i++){
          let mkey = "answer"+i
          if(item[mkey] ) item.choice.push( item[mkey] );
        }
        return item;
      })
      this.datalist = list
    },
    methods:{
      getMulResult( select ){
        let selectList = (''+select).split("");
        let transformChar = this.transformChar;
        selectList = selectList.map( item=> {return transformChar[+item]})
        return selectList.join(",")
      }
    }
  }
</script>

<style>
  .exam-content{
    width: 1024px;
    background: #FFFFFF;
    margin: 0 auto;
  }

</style>