Vue.js 表格手动填充数据实现横线

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ]
    }
  }
}
</script>
<p>在上述示例中，'people'数组包含了要显示在表格中的数据。通过使用'v-for'指令，可以遍历数组中的每个对象，并将其渲染为表格的一行。在每一行中，使用双花括号插值语法'{{ person.name }}'和'{{ person.age }}'来显示每个对象的姓名和年龄字段。</p>
<p>通过手动填写数据到'people'数组，可以动态地更新表格中的内容。</p>