用vue代码写5个随机的数学计算题

以下是一个简单的 Vue 组件示例，可以生成 5 个随机的数学计算题：

<template>
  <div>
    <h2>随机数学计算题</h2>
    <ul>
      <li v-for="(question, index) in questions" :key="index">
        {{ question.expression }} = <input v-model.number="question.answer" type="text"/>
      </li>
    </ul>
    <button @click="checkAnswers">提交答案</button>
    <p v-if="showResults">{{ resultMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [],
      showResults: false,
      correctAnswers: 0,
      totalQuestions: 5
    }
  },
  created() {
    // 生成随机数学计算题
    for (let i = 0; i < this.totalQuestions; i++) {
      const questionType = Math.floor(Math.random() * 4); // 随机生成加减乘除题型
      let num1 = Math.floor(Math.random() * 100) + 1; // 随机生成 1~100 之间的整数
      let num2 = Math.floor(Math.random() * 100) + 1;
      let answer = 0;
      let operator = '';

      switch (questionType) {
        case 0: // 加法
          operator = '+';
          answer = num1 + num2;
          break;
        case 1: // 减法
          operator = '-';
          answer = num1 - num2;
          break;
        case 2: // 乘法
          operator = '×';
          answer = num1 * num2;
          break;
        case 3: // 除法
          operator = '÷';
          num1 = num1 * num2; // 确保 num1 是 num2 的倍数
          answer = num1 / num2;
          break;
      }

      const question = {
        expression: `${num1} ${operator} ${num2}`,
        answer: null,
        correctAnswer: answer
      };

      this.questions.push(question);
    }
  },
  methods: {
    checkAnswers() {
      this.showResults = true;
      this.correctAnswers = 0;

      for (let i = 0; i < this.totalQuestions; i++) {
        if (this.questions[i].answer === this.questions[i].correctAnswer) {
          this.correctAnswers++;
        }
      }
    }
  },
  computed: {
    resultMessage() {
      return `您答对了 ${this.correctAnswers} 道题，共 ${this.totalQuestions} 道题。`;
    }
  }
}
</script>

在上面的代码中，我们使用 `created` 钩子函数生成 5 个随机的数学计算题。每个题目包含一个算式和一个空白输入框，供用户填写答案。用户点击 "提交答案" 按钮后，调用 `checkAnswers` 方法，遍历每个题目，判断用户的答案是否正确，并统计答对的题目数量。最后，根据答题结果，显示相应的提示信息。