vue 数组删除

作者：我在坚强也需要有人疼发布日期:2025-05-16 浏览:37

// 示例代码：在 Vue 中删除数组中的元素

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    // 使用 splice 方法删除数组中的元素
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

// 解释说明：
// 在 Vue 中，直接修改数组（例如使用 `splice`、`push`、`pop` 等方法）会触发视图更新。
// 上面的代码中，我们定义了一个名为 `items` 的数组，并提供了一个 `removeItem` 方法，
// 该方法接受一个索引参数，并使用 `splice` 方法从数组中删除对应索引的元素。
// 当调用 `removeItem` 方法时，Vue 会自动检测到数组的变化并更新视图。

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

上一篇：vue3跳转页面

下一篇：vue2 inject