使用vue v-for 输出99乘法表

以下是使用vue v-for输出99乘法表的代码：

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="(row, rowIndex) in table" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: [],
    };
  },
  created() {
    this.generateTable();
  },
  methods: {
    generateTable() {
      for (let i = 1; i <= 9; i++) {
        let row = [];
        for (let j = 1; j <= i; j++) {
          row.push(`${j} x ${i} = ${j * i}`);
        }
        this.table.push(row);
      }
    },
  },
};
</script>

在上面的代码中，我们创建了一个table数组，用于存储99乘法表中的所有行和列。在created钩子函数中，我们调用generateTable方法来填充table数组。generateTable方法使用两个嵌套的for循环来生成99乘法表中的每个单元格，并将它们存储在table数组中。最后，我们使用两个嵌套的v-for指令来输出table数组中的所有行和列。第一个v-for指令用于循环遍历table数组中的每一行，第二个v-for指令用于循环遍历每一行中的每个单元格。我们使用:key指令来指定每个单元格的唯一key值，以提高渲染性能。最后，我们在每个单元格中输出其相应的值，即乘法表中的每个乘积。