vue3模拟二维数据

你可以使用 Vue3 的响应式 API 来模拟二维数据。以下是一个简单的示例：

首先，你需要创建一个 Vue 实例，并定义一个响应式的二维数组：

import { createApp, reactive } from 'vue';

const app = createApp({
  setup() {
    const data = reactive([
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ]);

    return {
      data
    };
  }
});

app.mount('#app');

在上面的示例中，我们使用 `reactive` 函数将二维数组转换为响应式对象。这样，当数组中的数据发生变化时，Vue 将自动更新相关的视图。

然后，你可以在模板中使用 `v-for` 指令来遍历二维数组，并渲染每个元素：

<div id="app">
  <table>
    <tr v-for="row in data" :key="row">
      <td v-for="item in row" :key="item">{{ item }}</td>
    </tr>
  </table>
</div>

在上面的示例中，我们使用了嵌套的 `v-for` 指令来遍历二维数组的行和列，并将每个元素渲染为表格的单元格。

这样，当你修改 `data` 中的数据时，相应的视图将自动更新。例如，你可以使用以下代码更改数组中的某个元素：

data[0][0] = 10;

请注意，这只是一个简单的示例，你可以根据你的需求进行扩展和修改。