Vue.js 表格循环渲染：使用 v-for 指令遍历数据

在 Vue.js 中，你可以使用 `v-for` 指令来循环渲染表格。假设你有一个包含数据的数组，你可以使用 `v-for` 指令将其循环渲染为表格。以下是一个简单的例子：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr v-for="item in items" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

在上面的例子中，我们使用 `v-for` 指令来循环遍历 `items` 数组，并在表格中渲染每个项目。`:key` 属性用于给每个循环项提供一个唯一的键值，以便 Vue 可以跟踪和优化它们的状态。

在 Vue 实例中，你需要定义一个 `items` 数组来存储你的数据，然后将其传递给模板。以下是一个完整的示例：

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ]
    };
  }
};
</script>

在上面的例子中，我们在 Vue 实例的 `data` 选项中定义了一个名为 `items` 的数组，并将其传递给模板。你可以根据实际情况更改数组的内容和结构。

这样，当你运行 Vue 应用时，将会以表格的形式显示出 `items` 数组中的数据。