用vue写一个HTML表格

可以使用 Vue 的模板语法和数据绑定，以及 v-for 指令来动态生成 HTML 表格。以下是一个简单的示例：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(person, index) in people" :key="index">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "Alice", age: 25, gender: "Female" },
        { name: "Bob", age: 30, gender: "Male" },
        { name: "Charlie", age: 20, gender: "Male" },
      ],
    };
  },
};
</script>

在上面的示例中，我们使用了一个包含三个对象的数组来表示人员信息。使用 v-for 指令，我们可以遍历数组并将每个对象的属性值渲染到表格中。注意 :key 属性的使用，它可以帮助 Vue 更高效地更新 DOM。