当前位置：首页 > VUE

vue实现添加数组

2026-01-21 04:48:53VUE

Vue 实现添加数组的方法

在 Vue 中，可以通过多种方式实现向数组添加元素。以下是几种常见的方法：

使用 push 方法

通过 Vue 的响应式系统，直接调用数组的 push 方法添加元素：

this.items.push(newItem);

使用扩展运算符

通过扩展运算符创建一个新数组并赋值：

vue实现添加数组

this.items = [...this.items, newItem];

使用 Vue.set

如果需要确保响应性，可以使用 Vue.set（Vue 2.x）或 this.$set：

this.$set(this.items, this.items.length, newItem);

使用 concat 方法

vue实现添加数组

通过 concat 方法合并数组：

this.items = this.items.concat([newItem]);

注意事项

在 Vue 中直接通过索引修改数组（如 this.items[index] = newItem）不会触发视图更新，应使用 Vue.set 或 this.$set。
对于大型数组，避免频繁操作，可以考虑使用计算属性或虚拟滚动优化性能。

示例代码

以下是一个完整的 Vue 组件示例，展示如何添加元素到数组：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2']
    };
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    }
  }
};
</script>