vue实现增删

Vue 实现增删功能

基础数据绑定与列表渲染

使用 v-for 指令渲染列表数据，结合 v-model 实现双向绑定。示例数据结构：

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

新增功能实现

通过数组的 push 方法或扩展运算符添加新项：

methods: {
  addItem() {
    this.items.push({
      id: Date.now(),
      name: this.newItem.name
    });
    this.newItem.name = '';
  }
}

删除功能实现

使用 filter 或 splice 移除指定项：

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

模板示例

<template>
  <div>
    <input v-model="newItem.name" placeholder="New item">
    <button @click="addItem">Add</button>

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

使用 Vuex 管理状态（可选）

对于大型应用，可通过 Vuex 集中管理状态：

// store.js
const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item)
    },
    DELETE_ITEM(state, id) {
      state.items = state.items.filter(item => item.id !== id)
    }
  }
})

性能优化建议

为列表项添加唯一的 :key 属性，使用 v-if 或 v-show 控制显示，考虑使用计算属性处理复杂数据过滤。