当前位置：首页 > 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 CLI 创建项目安装 Vue CLI 并初始化项目： npm install -g @vue/cli vue create user-info-tab…

vue实现画圆弧并着色

在 Vue 中实现画圆弧并着色使用 Canvas API 绘制圆弧在 Vue 组件的 mounted 钩子中，通过 Canvas API 绘制圆弧。创建一个 canvas 元素并获取其上下文：…

vue实现密码框的包

Vue 密码框实现方案在 Vue 中实现密码框功能，可以通过原生 HTML 结合 Vue 指令或使用第三方组件库完成。以下是几种常见方案：原生 HTML + Vue 双向绑定 <t…

vue实现生成二维码

使用qrcode.vue库生成二维码安装qrcode.vue库： npm install qrcode.vue --save 在Vue组件中使用： <template> <…

vue实现单点

Vue 实现单点登录（SSO）方案单点登录（SSO）允许用户在多个相关但独立的系统中使用同一组凭证登录。以下是基于 Vue 的实现方案：基于 OAuth2/OpenID Connect 的实现…

vue 实现挂载

Vue 实现挂载的基本方法在 Vue 中，挂载是将 Vue 实例与 DOM 元素关联的过程。通过挂载，Vue 可以管理 DOM 并实现数据绑定和响应式更新。创建 Vue 实例并挂载 con…

vue实现增删改