vue实现添加删除
Vue 实现添加和删除功能
在 Vue 中实现添加和删除功能通常涉及数据绑定、事件处理和列表渲染。以下是一个完整的示例，展示如何通过 Vue 实现动态添加和删除列表项。
初始化 Vue 实例
创建一个 Vue 实例，并定义数据和方法。数据包括一个数组 items 和一个输入框绑定的变量 newItem。
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3'],
newItem: ''
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem.trim());
this.newItem = '';
}
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});模板部分
在 HTML 中，使用 v-for 渲染列表，并通过 v-model 绑定输入框的值。为按钮绑定 addItem 和 removeItem 方法。
<div id="app">
<input v-model="newItem" placeholder="Add new item">
<button @click="addItem">Add</button>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">Delete</button>
</li>
</ul>
</div>功能说明
- 添加功能：通过
v-model绑定输入框的值到newItem，点击“Add”按钮时调用addItem方法，将输入的值添加到items数组中。 - 删除功能：每个列表项旁有一个“Delete”按钮，点击时调用
removeItem方法并传入当前项的索引，从items数组中移除对应项。
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Add/Remove Items</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="newItem" placeholder="Add new item">
<button @click="addItem">Add</button>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">Delete</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3'],
newItem: ''
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem.trim());
this.newItem = '';
}
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>注意事项
- 唯一键值：在实际项目中，建议为
v-for使用唯一的键值（如id），而非索引。 - 输入验证：添加输入验证以确保空值不会被添加到列表中。
- 组件化：对于复杂场景，可以将列表项封装为子组件，提升代码可维护性。
