从 foreach Vue.js 中删除项目 - JavaScript

在 Vue.js 应用程序中，我们常常需要在一组元素中删除项目。通过使用 v-for 循环来渲染元素，并给它们赋予一个唯一的 key 属性，则能够很容易地实现这一功能。在 JavaScript 中，我们可以使用 Array.prototype.filter() 方法并提供一个回调函数来删除一个项目。

以下是一个使用 Vue.js 的 v-for 循环，以及如何使用 filter() 方法从其中删除项目的示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="deleteItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.items = this.items.filter((item, i) => i !== index);
    }
  }
}
</script>

如上所示，我们在每个项目旁边添加了一个删除按钮。当单击按钮时，deleteItem() 方法将调用并传入该项目的索引。该方法使用 Array.prototype.filter() 方法来过滤出一个新的项目数组，将该项目从中删除。注意到，我们更新了 items 数据值来更新列表。

以上是如何从 v-for 循环中删除项目的简单方法，可以在 Vue.js 应用程序中实现。