vue 实现列表点击出现 添加删除功能

Vue是一种流行的JavaScript框架，用于构建用户界面。要实现一个具有添加和删除功能的列表，我们需要使用Vue的一些核心概念，如数据和事件处理。

首先，我们需要在Vue实例中定义一个数据属性来存储列表的项。我们可以使用数组来表示该列表，并通过在Vue实例的data选项中初始化它。例如：

data() {
  return {
    items: []
  }
}

接下来，我们需要在页面中设置一个点击事件，该事件将触发添加新项到列表的逻辑。我们可以使用Vue的@click指令来绑定该事件并指定一个方法处理它。例如：

@click="addItem"

在Vue实例的methods选项中，我们可以定义一个名为addItem的方法来实现添加项的逻辑。该方法将向列表的数组中推送一个新的项。例如：

methods: {
  addItem() {
    this.items.push("新项")
  }
}

类似地，我们还可以设置一个删除按钮或图标，并为其绑定一个点击事件处理方法。在该方法中，我们使用Vue的splice方法从数组中删除指定的项。例如：

methods: {
  removeItem(index) {
    this.items.splice(index, 1)
  }
}

最后，我们需要在页面上使用Vue的v-for指令循环渲染列表的项，并将索引传递给删除方法。例如：

<div v-for="(item, index) in items" :key="index">
  {{ item }}

  <button @click="removeItem(index)">删除</button>
</div>

通过上述步骤，我们就可以在Vue中实现一个具有添加和删除功能的列表。点击添加按钮将添加新项，并且每个项都有一个删除按钮，点击删除按钮将删除对应的项。