vue实现增删改
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 }
}更新功能
保存修改后的数据：
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>注意事项
- 使用
v-for时必须指定唯一的:key - 表单提交使用
@submit.prevent阻止默认行为 - 编辑状态切换时需要正确管理表单数据
- 对于复杂项目建议使用 Vuex 或 Pinia 管理状态
以上实现可根据实际需求进行调整，如添加表单验证、异步请求等功能。
