vue element实现前端页面的答题（上一题下一题，判断对错，点击指示符跳转题目，根据对错更改指示符颜色等功能）

Posted 2021-12-04 花傲芙

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue element实现前端页面的答题（上一题下一题，判断对错，点击指示符跳转题目，根据对错更改指示符颜色等功能）相关的知识，希望对你有一定的参考价值。

直接进入正题，先来了解一下 Map,下边网站可以了解更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 大家可以看一下代码和上方网站了解一下

        // set() 方法为 Map 对象添加或更新一个指定了键（key）和值（value）的（新）键值对。
        const map1 = new Map();
        map1.set(1, 'one');
        console.log(map1);
        map1.set(2,'two')
        console.log(map1);
        console.log('----------');

        // 小伏笔，可以打印出来看看
        const map2 = new Map();
        const arr1 = ['a','b','c','d','e']
        for (let i = 0; i < arr1.length; i++) {
            map2.set(i, arr1[i])
        }
        console.log(map2);
        console.log('----------');

        // get() 方法返回某个 Map 对象中的一个指定元素。
        const map3 = new Map();
        map3.set(3, 'Z');
        map3.set(4,'X');
        console.log(map3.get(3));
        console.log(map3.get(4));

    </script>
</body>
</html>

ok,现在进入编码阶段，最后的效果图的话，会尽快补上

现在开始写界面和样式...,随便搞搞就行..，贴上我的代码，并加上数据，数据自己随便改

<template>
  <div>
    <div class="main" style="width:1200px;height:800px;padding:10px;margin:0 auto;background-color:rgba(0,0,0,.2);">
      <div class="main-left" style="width:790px;height:800px;background-color:rgba(0,0,0,.2);">
        <div style="width:790px;height:500px;background-color:#fff;">

        </div>
        <div style="width:790px;height:290px;background-color:#fff;">
          
        </div>
      </div>
      <div class="main-right" style="width:400px;height:800px;background-color:#fff;">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Helloworld',
  data() {
    return {
      question:[
        {
          analysis: '',
          answer: 'A',
          id: 1,
          name: '世界第一高峰（ ）m',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"}]'
        },
        {
          analysis: '',
          answer: 'B',
          id: 2,
          name: '()口一头猪?',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]'
        },
        {
          analysis: '',
          answer: '123',
          id: 11,
          name: '我是_____,哈哈哈',
          value: ''
        },
        {
          analysis: '',
          answer: 'true',
          id: 21,
          name: '今天吃奥里给了吗？',
          value: ''
        },
        {
          analysis: '',
          answer: '大苏打苏uuu大苏打撒旦',
          id: 31,
          name: '请写出所有中国公民的名字',
          value: ''
        },
      ]
    };
  },
  mounted() {
  },
  updated() {
  },
  methods: {
  }
};
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-between;
}
.main-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

现在完成了，上一题，下一题，判断对错，记录题目状态，点击试题总览圆圈跳转题目，答案的显示隐藏等。。，后续会继续将其他功能补全。。。并且会写好注释

<template>
  <div>
    <div class="main" style="width:1200px;height:800px;padding:10px;margin:0 auto;background-color:rgba(0,0,0,.2);">
      <div class="main-left" style="width:790px;height:800px;background-color:rgba(0,0,0,.2);">
        <div style="width:750px;height:460px;background-color:#fff;padding:20px;">
          <div v-if="question[start].type === 1">
              <div>一 . 选择题</div>
              <div>{{start+1}} . {{question[start].name}}</div>
              <div>
                <el-radio-group  v-model="answerBuff" @change="selectanswer">
                  <div v-for="(item,index) in JSON.parse(question[start].value)" :key="index">
                    <el-radio style="margin-top:15px;" :disabled = selectradio :label="item.key"><span>{{item.key}} . {{item.value}}</span></el-radio>
                  </div>
                </el-radio-group>
              </div>
          </div>
          <div  style="width:50%;margin:150px auto; 0">
            <el-button type="primary" @click="upquestion">上一题</el-button>
            <el-button type="primary" @click="nextquestion">下一题</el-button>
            <!-- <el-button type="primary" >提交答案</el-button> -->
          </div>
        </div>
        <div style="width:790px;height:290px;background-color:#fff;">
          <div v-show="showanswer">
            <div>
              <h3 :style="{'color': answerBuff === question[start].answer? 'blue' : 'red'}">
                  {{answerBuff === question[start].answer? '正确': '错误'}}
                  <span  style="margin-left:20px;color:blue;" >
                    正确答案是: {{(question[start].answer)}}
                  </span>
              </h3>
              <span><strong>解析 : </strong>{{question[start].analysis? question[start].analysis : '解析暂无'}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 总览 -->
      <div class="main-right" style="width:400px;height:800px;background-color:#fff;">
        <h3 style="text-align:center;">试题总览</h3>
        <div class="tip" style="display:flex;justify-content:space-evenly;">
          <div><div style="width:20px;height:20px;display:inline-block;border-radios:50%;background-color:red;border-radius: 50%;vertical-align: bottom;"></div><span>错误</span></div>
          <div><div style="width:20px;height:20px;display:inline-block;border-radios:50%;background-color:blue;border-radius: 50%;vertical-align: bottom;"></div><span>正确</span></div>
          <div><div style="width:19px;height:19px;display:inline-block;border: 1px solid black;border-radios:50%;background-color:#fff;border-radius: 50%;vertical-align: bottom;"></div><span>未答</span></div>
        </div>
        <div class="clearfix" style="margin-top:20px;">
          <div>一、选择题</div>
          <p>点击指示符可跳转题目</p>
          <div v-for="(item, index) in question" :key="index">
            <div  v-if="item.type === 1"   @click="clickchange(index)"  style="margin-left: 10px;text-align: center; float: left; width: 30px; height: 30px; line-height: 30px;border-radius: 50%; border: 1px solid gainsboro;">{{index+1}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Helloworld',
  data() {
    return {
      start: 0,
      answers: new Map(),
      answerBuff: '', // 所有的类型题目的答案都绑它
      selectradio: false,
      showanswer: false,
      question:[ // type 1 选择 2 填空，3，判断，4 简答
        {
          analysis: '',
          answer: 'A',
          type: 1,
          id: 1,
          name: '世界第一高峰（ ）m',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"}]'
        },
        {
          analysis: '',
          answer: 'B',
          id: 2,
          type:1,
          name: '()口一头猪?',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]'
        },
        {
          analysis: '',
          answer: 'B',
          id: 3,
          type:1,
          name: '()口一头牛?',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]'
        },
        {
          analysis: '',
          answer: 'B',
          id: 4,
          type:1,
          name: '()口一头羊?',
          value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]'
        },
        {
          analysis: '',
          answer: '123',
          id: 11,
          type: 2,
          name: '我是_____,哈哈哈',
          value: ''
        },
        {
          analysis: '',
          answer: 'true',
          id: 21,
          type: 3,
          name: '今天吃奥里给了吗？',
          value: ''
        },
        {
          analysis: '',
          answer: '大苏打苏uuu大苏打撒旦',
          id: 31,
          type: 4,
          name: '请写出所有中国公民的名字',
          value: ''
        },
      ]
    };
  },
  mounted() {
  },
  updated() {
  },
  methods: {
    core () {
      this.answerBuff = this.answers.get(this.start)
      if (this.answers.get(this.start) === undefined) {
        this.showanswer = false
      } else {
        this.showanswer = true
      }
    },
    upquestion () {
      this.start--
      this.core()
    },
    nextquestion () {
      this.start++
      this.core()
    },
    selectanswer (val) {
      this.answers.set(this.start, val)
      this.showanswer = true
    },
    clickchange (index) { // 点击指示符跳转题目
      this.start = index
      this.core()
    },
  }
};
</script>

<style scoped>
.clearfix:after {
  content:"";
  display: block;
  clear:both;
}
.main {
  display: flex;
  justify-content: space-between;
}
.main-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

目前的效果，后续功能还会继续添加，今天有些困了，喜欢的话，请给我点赞吧，谢谢

以上是关于vue element实现前端页面的答题（上一题下一题，判断对错，点击指示符跳转题目，根据对错更改指示符颜色等功能）的主要内容，如果未能解决你的问题，请参考以下文章

Laravel + Vue + element-ui 前端项目一vue 实现查看更多 5

vue入门003~vue项目引入element并创建一个登录页面

vue+element UI实现多级导航菜单

Vue + element-ui 前端项目一Table 表格并实现分页 2

前端学习（3082）：vue+element今日头条管理-页面布局