vue实现增删

Vue 实现增删功能

在 Vue 中实现增删功能通常涉及数据绑定、事件处理和列表渲染。以下是基于 Vue 2 或 Vue 3 的实现方法：

数据定义

初始化一个数组用于存储列表数据，并在 Vue 实例的 data 中声明：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ],
    newItemName: ''
  }
}

添加功能

通过输入框绑定 newItemName，点击按钮触发添加方法：

methods: {
  addItem() {
    if (this.newItemName.trim()) {
      this.items.push({
        id: Date.now(), // 生成唯一 ID
        name: this.newItemName
      });
      this.newItemName = ''; // 清空输入框
    }
  }
}

模板部分：

<input v-model="newItemName" placeholder="输入新项名称">
<button @click="addItem">添加</button>

删除功能

通过索引或唯一标识（如 id）删除指定项：

methods: {
  deleteItem(id) {
    this.items = this.items.filter(item => item.id !== id);
  }
}

模板中使用 v-for 渲染列表，并为每项绑定删除事件：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="deleteItem(item.id)">删除</button>
  </li>
</ul>

关键点说明

1. 唯一标识：建议为每项分配唯一 id（如 Date.now()），避免直接使用索引删除可能导致的渲染问题。
2. 数组更新：Vue 能检测到数组的变更方法（如 push、filter），但直接通过索引修改项（如 this.items[0] = newValue）需使用 Vue.set。
3. Vue 3 差异：若使用 Vue 3，组合式 API 的写法如下：

   import { ref } from 'vue';
   const items = ref([...]);
   const newItemName = ref('');

完整示例可参考 Vue 官方文档的列表渲染和事件处理部分。