vue中table列表怎么多列表展示

在Vue中，你可以使用v-for指令来循环遍历一个数组并渲染出多个列表项。例如，你可以这样写：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
      ],
    };
  },
};
</script>

在这个例子中，我们定义了一个名为list的数组，其中包含了三个对象，每个对象都有name、age和gender三个属性。然后，我们使用v-for指令来循环遍历这个数组，并将每个对象的属性渲染到表格中的对应列中。注意，我们使用了:key属性来为每个列表项指定一个唯一的标识符，这可以提高渲染性能。