用vue书写一个随机生成20个一百以内加减乘除算术式的单页面组件

您可以创建一个 Vue 组件，该组件将生成 20 个随机的加减乘除算式，并显示在单独的页面中。

以下是一个示例代码：

<template>
  <div>
    <h1>随机生成的 20 个一百以内加减乘除算术式</h1>
    <ul>
      <li v-for="expression in expressions" :key="expression">{{ expression }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expressions: []
    };
  },
  mounted() {
    for (let i = 0; i < 20; i++) {
      this.expressions.push(this.generateExpression());
    }
  },
  methods: {
    generateExpression() {
      const num1 = Math.floor(Math.random() * 100);
      const num2 = Math.floor(Math.random() * 100);
      const operator = ["+", "-", "*", "/"][Math.floor(Math.random() * 4)];
      return `${num1} ${operator} ${num2} =`;
    }
  }
};
</script>

该组件使用 `mounted` 钩子函数生成 20 个随机算式，并使用 `v-for` 循环显示在页面上。