vue.js将九九乘法表一个一个渲染出来

Vue.js 可以通过模板（template）结合JavaScript计算属性来实现九九乘法表的动态渲染。下面是一个简单的示例：

<template>
  <div id="multiplicationTable">
    <table>
      <tr v-for="(row, rowIndex) in getMultiples(9)" :key="rowIndex">
        <td v-for="col in row" :key="col">{{ col }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    // 使用计算属性生成乘法表数组
    getMultiples(n) {
      const table = [];
      for (let i = 1; i <= n; i++) {
        let row = [];
        for (let j = 1; j <= n; j++) {
          row.push(i * j);
        }
        table.push(row);
      }
      return table;
    }
  }
};
</script>

在这个例子中，`v-for`指令用于循环遍历两个嵌套的循环，外层是行（`rowIndex`），内层是列（`col`）。`getMultiples`函数是一个计算属性，它会生成一个二维数组，表示九九乘法表。每当数据发生改变（如n值变化），Vue会自动更新表格。