做一个vue的表格以及数据

在Vue中创建一个表格通常涉及到使用`v-for`指令遍历数据并显示在每个单元格中。下面是一个基本的例子，展示如何创建一个简单的表格和数据：

**HTML模板（template部分）:**

<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

**JavaScript部分 (script部分):**

<script>
export default {
  data() {
    return {
      items: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }, // 更多数据...
      ]
    };
  }
};
</script>

在这个例子中，`items`数组存储了表格的数据，每条数据是一个对象，包含姓名、年龄和城市的键值对。`v-for`指令用于迭代这个数组，并将每个对象的属性渲染到对应的表格单元格。