Vue.js 中点击添加按钮将对象添加到数组

<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="text" v-model="name">
      <label>年龄：</label>
      <input type="number" v-model="age">
      <button type="button" @click="addPerson">添加</button>
    </form>
    <ul>
      <li v-for="(person, index) in persons" :key="index">
        {{ person.name }}，{{ person.age }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      persons: []
    }
  },
  methods: {
    addPerson() {
      const person = {
        name: this.name,
        age: this.age
      }
      this.persons.push(person)
      this.name = ''
      this.age = ''
    }
  }
}
</script>
<p>这个例子中，我们定义了一个空数组 <code>persons</code>，然后在 <code>addPerson</code> 方法中创建一个包含输入框中姓名和年龄的对象 <code>person</code>，并使用 <code>push()</code> 方法将其添加到 <code>persons</code> 数组中。最后将输入框中的值清空，以便下一次添加。在模板中，使用 <code>v-for</code> 指令遍历 <code>persons</code> 数组并渲染每个对象的值。</p>