vue如何实现添加删除

实现添加和删除功能

在Vue中实现添加和删除功能通常涉及数据绑定和事件处理。以下是一个基本实现方式：

数据准备 在组件的data或setup中定义一个数组来存储项目：

data() {
  return {
    items: [],
    newItem: ''
  }
}

添加功能实现 创建一个方法将新项目添加到数组中：

methods: {
  addItem() {
    if (this.newItem.trim()) {
      this.items.push(this.newItem.trim())
      this.newItem = ''
    }
  }
}

删除功能实现 通过索引移除特定项目：

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

模板实现

在模板中绑定这些方法和数据：

<div>
  <input v-model="newItem" @keyup.enter="addItem">
  <button @click="addItem">添加</button>

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

使用Vue 3组合式API

对于Vue 3，可以使用组合式API实现相同功能：

import { ref } from 'vue'

export default {
  setup() {
    const items = ref([])
    const newItem = ref('')

    const addItem = () => {
      if (newItem.value.trim()) {
        items.value.push(newItem.value.trim())
        newItem.value = ''
      }
    }

    const removeItem = (index) => {
      items.value.splice(index, 1)
    }

    return { items, newItem, addItem, removeItem }
  }
}

注意事项

确保为列表项设置唯一的key属性，这有助于Vue高效更新DOM。当处理复杂对象时，建议使用对象ID而非索引作为key。

对于删除操作，可以考虑添加确认对话框：

removeItem(index) {
  if (confirm('确定要删除此项吗？')) {
    this.items.splice(index, 1)
  }
}