vue实现增删
Vue 实现增删功能
数据绑定与列表渲染
在 Vue 中，通过 v-for 指令可以动态渲染列表数据。首先需要定义一个数组来存储数据，并在模板中使用 v-for 循环展示。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
<button @click="deleteItem(index)">删除</button>
</li>
</ul>
<input v-model="newItem" placeholder="输入新增项">
<button @click="addItem">新增</button>
</div>
</template>新增功能实现
新增功能通过 v-model 绑定输入框的值，并在点击按钮时调用方法将新数据添加到数组中。
<script>
export default {
data() {
return {
items: [
{ name: '项目1' },
{ name: '项目2' }
],
newItem: ''
};
},
methods: {
addItem() {
if (this.newItem.trim() === '') return;
this.items.push({ name: this.newItem });
this.newItem = '';
}
}
};
</script>删除功能实现
删除功能通过传递索引或唯一标识，使用数组的 splice 方法或 filter 方法移除指定项。
methods: {
deleteItem(index) {
this.items.splice(index, 1);
}
}使用唯一标识优化
在实际项目中，建议为每一项分配唯一标识（如 id），避免直接使用索引作为 key，以提高渲染性能和数据一致性。
data() {
return {
items: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' }
],
newItem: ''
};
},
methods: {
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id);
}
}注意事项
- 响应式更新：Vue 的数组更新需要通过特定方法（如
push、splice）或使用Vue.set确保响应式触发。 - 表单验证：新增时应对输入内容做非空校验或其他业务逻辑校验。
- 性能优化：列表数据较多时，可使用虚拟滚动（如
vue-virtual-scroller）提升性能。
