vue里实现增删改查
在Vue中实现增删改查（CRUD）
数据管理
使用data或ref（Vue 3）定义响应式数据存储列表和表单数据：
// Vue 2
data() {
return {
items: [],
form: { id: null, name: '', description: '' }
}
}
// Vue 3
const items = ref([])
const form = reactive({ id: null, name: '', description: '' })添加数据
通过表单提交将新数据加入列表：
function addItem() {
if (!form.name) return
items.value.push({ ...form, id: Date.now() })
resetForm()
}
function resetForm() {
form.id = null
form.name = ''
form.description = ''
}删除数据
通过数组过滤或splice方法移除指定项：
function deleteItem(id) {
items.value = items.value.filter(item => item.id !== id)
}编辑数据
将选中数据加载到表单进行修改：
function editItem(item) {
form.id = item.id
form.name = item.name
form.description = item.description
}
function updateItem() {
const index = items.value.findIndex(item => item.id === form.id)
if (index !== -1) {
items.value.splice(index, 1, { ...form })
resetForm()
}
}查询数据
实现本地搜索功能：
const searchQuery = ref('')
const filteredItems = computed(() => {
return items.value.filter(item =>
item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})组件示例
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<table>
<tr v-for="item in filteredItems" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>
<button @click="editItem(item)">编辑</button>
<button @click="deleteItem(item.id)">删除</button>
</td>
</tr>
</table>
<form @submit.prevent="form.id ? updateItem() : addItem()">
<input v-model="form.name" required>
<textarea v-model="form.description"></textarea>
<button type="submit">{{ form.id ? '更新' : '添加' }}</button>
<button v-if="form.id" @click="resetForm">取消</button>
</form>
</div>
</template>后端集成
使用axios与API交互：
async function fetchItems() {
const { data } = await axios.get('/api/items')
items.value = data
}
async function saveItem() {
const method = form.id ? 'put' : 'post'
const url = form.id ? `/api/items/${form.id}` : '/api/items'
await axios[method](url, form)
await fetchItems()
resetForm()
}状态管理
对于复杂应用可引入Pinia/Vuex：
// Pinia示例
export const useItemStore = defineStore('items', {
state: () => ({
items: []
}),
actions: {
async addItem(item) {
await api.add(item)
this.items.push(item)
}
}
})表单验证
使用Vuelidate或原生验证：
import { required } from '@vuelidate/validators'
const rules = {
form: {
name: { required }
}
}
const v$ = useVuelidate(rules, { form })注意事项
- 始终为列表项设置唯一
key - 复杂表单考虑使用
v-model修饰符（如.trim） - 大规模数据考虑虚拟滚动优化性能
- 敏感操作需添加确认对话框
- API调用需添加错误处理
以上实现可根据项目需求组合使用，Vue 2与Vue 3的主要差异在于Composition API的使用方式。
