可以使用Vue的数组方法push()来实现。首先需要定义一个空数组,然后在点击添加时,将要添加的对象使用push()方法添加到数组中。

示例代码如下:

<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>

这个例子中,我们定义了一个空数组persons,然后在addPerson方法中创建一个包含输入框中姓名和年龄的对象person,并使用push()方法将其添加到persons数组中。最后将输入框中的值清空,以便下一次添加。在模板中,使用v-for指令遍历persons数组并渲染每个对象的值。

vue点击添加的时候把一个对象包括对象里的值添加到这个数组里

原文地址: https://www.cveoy.top/t/topic/bYCZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录