Vue快速教程：如何优雅地移除数组中的特定元素？

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="removeItem(index)">移除</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' },
      ],
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

这段代码展示了如何在Vue中创建一个列表，并为每个列表项添加一个按钮，点击按钮后调用removeItem方法从items数组中移除特定的元素。使用了splice方法，它可以传入要删除的元素的索引和删除元素的数量。这是一种简洁且直接的方式来更新Vue组件中的响应式数据。