当前位置：首页 > VUE

vue实现增删改

2026-02-25 15:03:35VUE

Vue 实现增删改功能

在 Vue 中实现增删改功能通常涉及数据绑定、事件处理和状态管理。以下是实现这些功能的核心方法。

数据初始化

在 Vue 的 data 中初始化一个数组或对象，用于存储需要操作的数据。例如：

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

新增功能

通过表单绑定 v-model 收集新数据，点击按钮触发添加方法：

methods: {
  addItem() {
    if (this.newItem.name.trim() === '') return
    this.items.push({ ...this.newItem, id: Date.now() })
    this.newItem = { id: '', name: '' }
  }
}

模板部分：

vue实现增删改

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

删除功能

通过传入索引或唯一标识符删除指定项：

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

模板部分：

vue实现增删改

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

修改功能

设置编辑状态，保存修改后的数据：

methods: {
  editItem(index) {
    this.editingIndex = index
    this.newItem = { ...this.items[index] }
  },
  saveItem() {
    if (this.editingIndex >= 0) {
      this.items.splice(this.editingIndex, 1, { ...this.newItem })
      this.editingIndex = -1
      this.newItem = { id: '', name: '' }
    }
  }
}

模板部分：

<button @click="editItem(index)">Edit</button>
<button v-if="editingIndex === index" @click="saveItem">Save</button>

使用计算属性优化

对于复杂的数据操作，可以使用计算属性：

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

注意事项

确保为列表项设置唯一的 :key，通常使用 id 而非索引。
对于大型项目，建议使用 Vuex 或 Pinia 管理状态。
表单验证应在提交前完成，避免无效数据。

标签: vue

分享给朋友：

vue实现贴图

Vue 实现贴图功能在Vue中实现贴图功能通常涉及将图片动态添加到指定位置或元素上。以下是几种常见实现方式：使用v-bind动态绑定图片通过数据驱动的方式动态更换图片源： <templ…

vue实现grid

Vue 实现 Grid 布局的方法使用 CSS Grid 布局 Vue 可以结合 CSS Grid 布局实现灵活的网格系统。CSS Grid 是现代浏览器原生支持的布局方案，无需额外依赖库。 &l…

vue实现suspense

Vue 3 中实现 Suspense Suspense 是 Vue 3 引入的一个内置组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示一个后备内容（fallback），直到异…

vue实现订单

Vue 实现订单功能订单数据结构设计订单数据通常包含以下字段： order: { id: String, // 订单ID userId: String,…

vue翻页实现

Vue翻页实现方法基础分页组件实现使用v-for和计算属性实现基础分页逻辑： <template> <div> <ul> <li…

甘特图vue实现

甘特图 Vue 实现方法使用开源库 vue-ganttastic 安装依赖： npm install vue-ganttastic 基础实现代码： <template> <…

vue实现增删改