vue里实现增删改查
Vue 中实现增删改查（CRUD）
数据准备与初始化
在 Vue 组件的 data 中定义初始数据列表和表单数据：
data() {
return {
items: [
{ id: 1, name: 'Item 1', price: 10 },
{ id: 2, name: 'Item 2', price: 20 }
],
form: {
id: null,
name: '',
price: 0
},
isEditing: false
}
}添加数据
通过表单绑定 v-model，提交时向数组添加新数据：
methods: {
addItem() {
this.items.push({
id: Date.now(),
name: this.form.name,
price: this.form.price
})
this.resetForm()
}
}删除数据
使用 filter 或 splice 移除指定项：
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id)
}编辑数据
将选中项数据填充到表单，标记编辑状态：
editItem(item) {
this.form = { ...item }
this.isEditing = true
}更新数据
根据 ID 找到对应项并更新数据：
updateItem() {
const index = this.items.findIndex(item => item.id === this.form.id)
this.items.splice(index, 1, { ...this.form })
this.resetForm()
this.isEditing = false
}表单重置
清理表单数据并重置状态：
resetForm() {
this.form = { id: null, name: '', price: 0 }
}模板示例
<template>
<div>
<form @submit.prevent="isEditing ? updateItem() : addItem()">
<input v-model="form.name" placeholder="Name">
<input v-model.number="form.price" type="number" placeholder="Price">
<button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
</form>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - ${{ item.price }}
<button @click="editItem(item)">Edit</button>
<button @click="deleteItem(item.id)">Delete</button>
</li>
</ul>
</div>
</template>使用计算属性优化
对于复杂数据操作可添加计算属性：
computed: {
totalItems() {
return this.items.length
}
}注意事项
- 确保为列表项设置唯一的
:key - 对于深层对象，使用
{ ...object }展开运算符避免引用问题 - 表单验证建议使用 Vuelidate 等库
- 大型项目可考虑 Vuex 管理状态
