vue数组添加对象

// 在 Vue 中向数组添加对象的示例代码

// 假设我们有一个 Vue 实例，其中包含一个名为 items 的数组
new Vue({
  el: '#app',
  data: {
    items: [
      { name: '苹果', price: 10 },
      { name: '香蕉', price: 5 }
    ]
  },
  methods: {
    // 添加新对象到数组的方法
    addItem() {
      // 使用 push 方法将新对象添加到数组中
      this.items.push({ name: '橙子', price: 8 });
    }
  }
});

// HTML 部分
<div id="app">
  <ul>
    <li v-for="item in items" :key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
  <button @click="addItem">添加商品</button>
</div>

解释说明：

1. Vue 实例：我们创建了一个 Vue 实例，并在 data 中定义了一个名为 items 的数组，该数组包含一些初始的对象。
2. methods：定义了一个名为 addItem 的方法，使用 push 方法将新对象 { name: '橙子', price: 8 } 添加到 items 数组中。
3. HTML 模板：通过 v-for 指令遍历 items 数组并显示每个对象的 name 和 price。点击按钮会调用 addItem 方法，从而向数组中添加新的对象。