vue 数组删除指定元素

作者：暗夜骑士发布日期:2026-04-22 浏览:59

// 使用 Vue.js 删除数组中的指定元素

// 假设我们有一个 Vue 实例，其中包含一个数组
new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    // 删除指定元素的方法
    removeItem(itemToRemove) {
      // 使用 filter 方法创建一个新数组，排除指定的元素
      this.items = this.items.filter(item => item !== itemToRemove);
    }
  }
});

// HTML 部分
<div id="app">
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
  <button @click="removeItem(3)">删除 3</button>
</div>

解释说明：

Vue 实例：我们创建了一个 Vue 实例，并在 data 中定义了一个名为 items 的数组。
移除方法：removeItem 方法接收一个参数 itemToRemove，表示要从数组中移除的元素。使用 filter 方法创建一个新的数组，该数组不包含指定的元素，并将结果赋值给 items。
HTML 部分：通过 v-for 指令遍历 items 数组并显示每个元素。点击按钮时调用 removeItem 方法，传入要删除的元素（例如 3）。

上一篇：vue 数组长度

下一篇：vue .map