用Vue 3填充HTML表

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>

const app = Vue.createApp({
  data() {
    return {
      people: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 25, gender: '女' },
        { id: 3, name: '王五', age: 30, gender: '男' }
      ]
    };
  }
});

app.mount('#app');