当前位置：首页 > VUE

vue实现增删改查

2026-01-20 08:47:12VUE

使用Vue实现增删改查功能

Vue.js作为一款渐进式JavaScript框架，非常适合构建数据驱动的交互界面。以下是实现增删改查功能的详细方法：

数据准备与初始化

在Vue实例的data中定义基础数据结构和当前操作状态：

data() {
  return {
    items: [], // 存储所有数据
    form: {    // 表单数据对象
      id: '',
      name: '',
      description: ''
    },
    isEditing: false // 编辑状态标志
  }
}

创建操作实现

添加新数据项的方法，使用数组的push方法或展开运算符：

vue实现增删改查

methods: {
  addItem() {
    if(this.isEditing) return

    this.items.push({
      id: Date.now(),
      ...this.form
    })
    this.resetForm()
  }
}

读取操作实现

在模板中使用v-for指令循环渲染数据列表：

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

更新操作实现

编辑现有数据项的方法，需要先填充表单再更新：

vue实现增删改查

editItem(item) {
  this.form = { ...item }
  this.isEditing = true
},

updateItem() {
  const index = this.items.findIndex(i => i.id === this.form.id)
  this.items.splice(index, 1, { ...this.form })
  this.resetForm()
}

删除操作实现

通过filter方法或splice移除指定数据项：

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

表单重置方法

维护一个单独的表单重置方法保持代码整洁：

resetForm() {
  this.form = {
    id: '',
    name: '',
    description: ''
  }
  this.isEditing = false
}

完整组件示例

将上述方法组合成完整组件：

<template>
  <div>
    <form @submit.prevent="isEditing ? updateItem() : addItem()">
      <input v-model="form.name" placeholder="名称">
      <input v-model="form.description" placeholder="描述">
      <button type="submit">{{ isEditing ? '更新' : '添加' }}</button>
      <button v-if="isEditing" @click="resetForm">取消</button>
    </form>

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