当前位置：首页 > VUE

vue前端实现增删改

2026-01-23 00:33:29VUE

Vue 前端实现增删改查

在 Vue 中实现增删改查（CRUD）功能通常需要结合 Vue 的数据绑定、组件化以及状态管理（如 Vuex 或 Pinia）。以下是具体实现方法：

数据绑定与列表渲染

使用 v-for 指令渲染列表数据，并通过 v-model 实现表单双向绑定。例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        <button @click="deleteItem(index)">删除</button>
        <button @click="editItem(index)">编辑</button>
      </li>
    </ul>
    <input v-model="newItem" placeholder="新增条目" />
    <button @click="addItem">添加</button>
  </div>
</template>

新增功能

通过 push 方法将新数据添加到数组中：

<script>
export default {
  data() {
    return {
      items: [{ name: '示例1' }, { name: '示例2' }],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push({ name: this.newItem });
        this.newItem = '';
      }
    }
  }
}
</script>

删除功能

使用 splice 方法根据索引删除数据：

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

编辑功能

通过临时存储编辑状态和数据实现：

<template>
  <div v-if="editingIndex !== null">
    <input v-model="editedItem" />
    <button @click="saveEdit">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editingIndex: null,
      editedItem: ''
    }
  },
  methods: {
    editItem(index) {
      this.editingIndex = index;
      this.editedItem = this.items[index].name;
    },
    saveEdit() {
      this.items[this.editingIndex].name = this.editedItem;
      this.editingIndex = null;
    }
  }
}
</script>

状态管理（可选）

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

// Pinia 示例
import { defineStore } from 'pinia';

export const useItemStore = defineStore('items', {
  state: () => ({ items: [] }),
  actions: {
    addItem(item) {
      this.items.push(item);
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
});

与后端交互

通过 axios 或 fetch 调用 API：

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