当前位置：首页 > VUE

vue实现增删改

2026-03-26 18:21:17VUE

Vue 实现增删改查功能

Vue.js 提供了响应式数据绑定和组件化开发能力，可以高效实现增删改查功能。以下是基于 Vue 2.x 或 3.x 的实现方案：

数据准备

初始化一个数组存储数据，并设置表单绑定的对象：

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

新增功能

创建新条目并添加到数组：

methods: {
  addItem() {
    if (!this.form.name) return

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

删除功能

根据ID删除指定条目：

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

编辑功能

将选中条目数据加载到表单：

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

更新功能

保存修改后的数据：

vue实现增删改

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

表单重置

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>