Vue实现一个简单的答题案例（单选/多选）

1、html

<template>
  <div class="root-div">
    <div v-for="(item,index) in question" :key="index" v-show="index==idx" class="question">
      <div class="title">
        <span class="select" v-if="item.ismultiple">多选</span>
        <span class="select" v-else>单选</span>
        题目：{{item.name}}
        <span class="answer" v-show="answerShow">答案：{{item.answer}}</span>
        <span style="float: right;">{{idx+1}}/{{question.length}}</span>
      </div>
      <div>
        <div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list" @click="handleCilck(val)">
          {{val.letter}}.{{val.name}}</div>
      </div>
    </div>
    <div class="btn-box">
      <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;':''"
        :disabled="idx == 0 ? true : false">上一题</button>
      <button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;':''"
        :disabled="idx == question.length - 1 ? true : false">下一题</button>
      <button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;">提交</button>
      <button v-show="isshow" @click="answerShow = true"
        style="background-color: rgb(238, 190, 79);color: rgb(255, 255, 255);">查看答案</button>
    </div>
  </div>
</template>

2、script

<script>
export default {
  data() {
    return {
      idx: 0,
      allSocre: 0,
      isshow: false,
      answerShow: false,
      ismultipleAnswer: [],
      question: [
        {
          id: 1,
          ismultiple: false,
          name: '十八大何时召开的?',
          answer: '2012年11月8日',
          score: 2,
          option: [
            { id: 1, name: '2012年11月8日', checked: false, letter: 'A' },
            { id: 2, name: '2012年11月15日', checked: false, letter: 'B' },
            { id: 3, name: '2012年12月18日', checked: false, letter: 'C' },
          ],
        },
        {
          id: 2,
          ismultiple: false,
          name: '你喜欢吃什么?',
          answer: 'C',
          score: 2,
          option: [
            { id: 1, name: '香蕉', checked: false, letter: 'A' },
            { id: 2, name: '苹果', checked: false, letter: 'B' },
            { id: 3, name: '橘子', checked: false, letter: 'C' },
          ],
        },
        {
          id: 3,
          ismultiple: false,
          name: '你的梦想是什么?',
          answer: 'B',
          score: 2,
          option: [
            { id: 1, name: '当一名程序员', checked: false, letter: 'A' },
            { id: 2, name: '当一名测试员', checked: false, letter: 'B' },
            { id: 3, name: '当一名运维', checked: false, letter: 'C' },
          ],
        },
        {
          id: 4,
          ismultiple: true, //是否多选
          name: '这是一题多选吗?',
          answer: 'BC',
          score: 2,
          option: [ //选项
            { id: 1, name: '不是', checked: false, letter: 'A' },
            { id: 2, name: '是的', checked: false, letter: 'B' },
            { id: 3, name: '是的', checked: false, letter: 'C' },
          ],
        },
        {
          id: 5,
          ismultiple: true, //是否多选
          name: '是多选吧?',
          answer: 'ABC',
          score: 2,
          option: [ //选项
            { id: 1, name: '是的', checked: false, letter: 'A' },
            { id: 2, name: '是的', checked: false, letter: 'B' },
            { id: 3, name: '是的', checked: false, letter: 'C' },
          ],
        },
      ]
    }
  },
  methods: {
    next () {
      this.idx++
    },
    back () {
      this.idx--
    },
    handleCilck (info) {
      let question = this.question[this.idx]  //每题选项
      let option = this.question[this.idx].option //每一题题目的选项

      //选中添加样式
      option.forEach(item => {
        if (item.id == info.id) {  //如果选中的与数据里面的相等就改变他的样式
          item.checked = !item.checked  // 是否选中，取反 
        } else if (!question.ismultiple) {  //如果不是多选 只能选中一个 其他的都为false
          item.checked = false
        }
      });


      let isAnswer = info.letter //选中的答案
      let answer = this.question[this.idx].answer //题目中的答案

      //如果是多选
      if (question.ismultiple) {
        this.ismultipleAnswer = []
        option.forEach(item => {
          if (item.checked) { //将选中的push到 ismultipleAnswer 数组中
            this.ismultipleAnswer.push(item.letter)
          }
        });
        isAnswer = this.ismultipleAnswer.join('')  //将ismultipleAnswer转为字符串 下面与答案比较
      }


      console.log('选中的答案', isAnswer);
      console.log('题目的答案', answer);


      //判断是否选正确，计算分数

      if (isAnswer == answer) { // 如果选的答案与题目答案相等,isOk 说明选对了
        this.question[this.idx].isOk = true
      } else {
        this.question[this.idx].isOk = false
      }

    },

    // 提交计算分数
    sumbit () {
      this.allSocre = 0  //每次计算总分先清0,，在计算
      let result = []  //定义选中的个数
      this.question.forEach(item => {
        //返回是否选中的数组
        let selsetArr = item.option.map(val => {
          if (val.checked) {
            return val.checked //map最终返回一个数组，返回 checked 的数组
          }
        })
        console.log('selsetArr', selsetArr);
        //这边是否包含true，包含 true 就push到result中
        const isTrue = selsetArr.includes(true)  //如果包含返回true,否则返回false
        //这里判断一下,如果 isTrue 是 true，说明包含true 就说明选了
        if (isTrue) {
          result.push(isTrue)  //如果选了，就push到 result 中
        }

        if (item.isOk) { //如果isOK 为 true 说明选了，计算分数
          this.allSocre += item.score
        }
      })
      //用选中 result 的长度  与 题目的长度比较 是否相当 不等就没选完
      if (result.length < this.question.length) {
        alert('还有题目没做呢')
        return
      }

      setTimeout(() => {
        alert('获得分数：' + this.allSocre)
        this.isshow = true
      }, 100);

    }
  }
}
</script>

3、css

<style lang="less" scoped>
.question {
  border-radius: 10px;
  color: #515152;
  font-size: 16px;
  padding: 10px 20px;
  margin: 50px 10px 0;
}
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin-top: 15px;
  margin-right: 10px;
  outline: none;
  background-color: rgb(255, 153, 98);
  border: 0;
  padding: 10px;
  color: rgb(61, 61, 61);
  border-radius: 5px;
}

button:active {
  background-color: rgba(248, 161, 121, 0.664);
}

.title {
  color: black;
  font-weight: 600;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}

.list {
  margin-top: 10px;
  padding: 10px 5px;
  font-size: 16px;
  border: 1px #eee solid;
  border-radius: 10px;
}

.bgc {
  color: #296ef0;
  background: rgba(41, 110, 240, 0.12);
  border: 1px solid rgba(41, 110, 240, 0.8);
}

.answer {
  color: brown;
  font-size: 16px;
  margin-left: 20px;
}

.select {
  font-size: 18px;
  color: rgb(243, 25, 25);
}
</style>