vue实现数据增删查找
Vue 实现数据增删查找
数据管理基础
Vue.js 通过响应式数据绑定和组件化开发，可以高效实现数据的增删查改功能。核心在于利用 data 存储数据，通过方法操作数据，并依赖 Vue 的响应式更新视图。
初始化数据
在 Vue 实例或组件的 data 中定义初始数据数组：
data() {
return {
items: [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' }
],
newItem: { id: '', name: '' },
searchKeyword: ''
}
}添加数据
通过方法向数组添加新数据，注意避免直接修改原数组：
methods: {
addItem() {
if (this.newItem.name.trim() === '') return;
this.items.push({
id: Date.now(),
name: this.newItem.name
});
this.newItem.name = '';
}
}删除数据
使用 filter 或 splice 删除指定数据项：
methods: {
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id);
}
}查找数据
通过计算属性实现实时搜索过滤：
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
);
}
}完整示例
<template>
<div>
<input v-model="searchKeyword" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
<button @click="deleteItem(item.id)">Delete</button>
</li>
</ul>
<input v-model="newItem.name" @keyup.enter="addItem" placeholder="Add new item">
<button @click="addItem">Add</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
],
newItem: { name: '' },
searchKeyword: ''
};
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
);
}
},
methods: {
addItem() {
if (this.newItem.name.trim() === '') return;
this.items.push({
id: Date.now(),
name: this.newItem.name
});
this.newItem.name = '';
},
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id);
}
}
};
</script>进阶优化
对于大型数据集，考虑以下优化：
- 使用 Vuex 集中管理状态
- 添加防抖处理搜索输入
- 实现分页加载
- 使用唯一 ID 生成库确保 ID 唯一性
注意事项
- 操作数组时遵循 Vue 的响应式规则，使用可检测的变更方法（如
push、splice） - 为
v-for列表添加唯一的key属性 - 复杂数据处理可迁移到计算属性中，保持模板简洁
