当前位置：首页 > VUE

vue里实现增删改查

2026-03-06 20:06:17VUE

Vue 中实现增删改查（CRUD）

基础数据结构准备

在 Vue 中实现增删改查通常需要先定义数据模型和操作逻辑。假设操作的对象为 items 列表，每个项包含 id 和 name 属性：

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

新增数据（Create）

通过表单绑定 newItem，提交时添加到列表：

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

模板部分：

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

删除数据（Delete）

通过 id 过滤列表实现删除：

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

模板部分：

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

修改数据（Update）

进入编辑状态时保存当前编辑的 id 和临时数据：

methods: {
  startEdit(item) {
    this.editingItemId = item.id;
    this.newItem = { ...item };
  },
  saveEdit() {
    const index = this.items.findIndex(item => item.id === this.editingItemId);
    if (index !== -1) {
      this.items.splice(index, 1, { ...this.newItem });
      this.cancelEdit();
    }
  },
  cancelEdit() {
    this.editingItemId = null;
    this.newItem = { id: null, name: '' };
  }
}

模板部分：

<li v-for="item in items" :key="item.id">
  <template v-if="editingItemId === item.id">
    <input v-model="newItem.name">
    <button @click="saveEdit">Save</button>
    <button @click="cancelEdit">Cancel</button>
  </template>
  <template v-else>
    {{ item.name }}
    <button @click="startEdit(item)">Edit</button>
  </template>
</li>

查询数据（Read）

通过计算属性实现过滤查询：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}

模板部分：

<input v-model="searchQuery" placeholder="Search...">
<ul>
  <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>

与后端 API 交互

实际项目中通常会结合 axios 调用后端接口：

import axios from 'axios';

methods: {
  async fetchItems() {
    const response = await axios.get('/api/items');
    this.items = response.data;
  },
  async addItem() {
    const response = await axios.post('/api/items', this.newItem);
    this.items.push(response.data);
  }
}

使用 Vuex 管理状态（可选）

对于复杂应用，建议使用 Vuex 集中管理状态：

vue里实现增删改查

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('ADD_ITEM', item);
    }
  }
});