vue 往表格中添加数据完整demo

好的，以下是一个用 Vue.js 往表格中添加数据的完整示例：

HTML 代码：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people">
        <td>{{ person.name }}</td>
        <td>{{ person.email }}</td>
      </tr>
    </tbody>
  </table>
  <form v-on:submit.prevent="addPerson">
    <label>Name:</label>
    <input type="text" v-model="newPerson.name">
    <label>Email:</label>
    <input type="email" v-model="newPerson.email">
    <button type="submit">Add Person</button>
  </form>
</div>

Vue.js 代码：

new Vue({
  el: '#app',
  data: {
    people: [
      { name: 'Alice', email: 'alice@example.com' },
      { name: 'Bob', email: 'bob@example.com' },
      { name: 'Charlie', email: 'charlie@example.com' }
    ],
    newPerson: { name: '', email: '' }
  },
  methods: {
    addPerson: function () {
      this.people.push({
        name: this.newPerson.name,
        email: this.newPerson.email
      });
      this.newPerson.name = '';
      this.newPerson.email = '';
    }
  }
});

这个示例中，我们使用了 Vue.js 的 `v-for` 指令来循环遍历 `people` 数组，并将每个人的名字和电子邮件地址显示在表格中。我们还创建了一个表单，让用户输入新的人员信息。当用户提交表单时，我们使用 `v-on:submit.prevent` 指令来阻止表单默认的提交行为，并调用 `addPerson` 方法。这个方法会在 `people` 数组中添加新的人员信息，并清空表单中的输入框。