当前位置：首页 > VUE

vue实现增删改

2026-01-06 23:34:56VUE

Vue 实现增删改查功能

Vue.js 是一个流行的前端框架，用于构建用户界面。以下是使用 Vue.js 实现增删改查（CRUD）功能的方法。

数据初始化

在 Vue 实例的 data 中初始化一个数组用于存储数据，以及一个对象用于临时存储表单数据。

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', description: 'Description 1' },
      { id: 2, name: 'Item 2', description: 'Description 2' }
    ],
    form: {
      id: null,
      name: '',
      description: ''
    },
    isEditing: false
  }
}

添加数据

通过表单输入数据，点击添加按钮将数据推送到数组中。

methods: {
  addItem() {
    if (!this.form.name || !this.form.description) return;
    this.form.id = this.items.length + 1;
    this.items.push({ ...this.form });
    this.resetForm();
  },
  resetForm() {
    this.form = { id: null, name: '', description: '' };
    this.isEditing = false;
  }
}

删除数据

通过传入的 id 删除数组中对应的数据项。

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

编辑数据

点击编辑按钮时，将对应数据填充到表单中，进入编辑模式。

methods: {
  editItem(item) {
    this.form = { ...item };
    this.isEditing = true;
  },
  updateItem() {
    const index = this.items.findIndex(item => item.id === this.form.id);
    if (index !== -1) {
      this.items.splice(index, 1, { ...this.form });
      this.resetForm();
    }
  }
}

模板部分

在模板中绑定数据和方法，实现交互功能。

<template>
  <div>
    <form @submit.prevent="isEditing ? updateItem() : addItem()">
      <input v-model="form.name" placeholder="Name">
      <input v-model="form.description" placeholder="Description">
      <button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
    </form>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.description }}
        <button @click="editItem(item)">Edit</button>
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>