vue实现动态添加删除
Vue 实现动态添加和删除元素
在 Vue 中动态添加和删除元素通常通过操作数据数组实现，结合 v-for 指令渲染列表，并通过方法修改数组内容。
基本实现步骤
1. 数据准备
在 Vue 的 data 中定义一个数组，用于存储动态元素的数据：
data() {
return {
items: [] // 初始为空数组
}
}2. 添加元素 通过方法向数组添加新元素，触发视图更新：
methods: {
addItem() {
this.items.push({
id: Date.now(), // 唯一标识
content: '新项目' + (this.items.length + 1)
})
}
}3. 删除元素 通过过滤或 splice 方法移除指定元素：
methods: {
removeItem(id) {
this.items = this.items.filter(item => item.id !== id)
// 或使用 splice：
// const index = this.items.findIndex(item => item.id === id)
// this.items.splice(index, 1)
}
}4. 模板渲染
使用 v-for 循环渲染列表，并绑定删除操作：
<template>
<div>
<button @click="addItem">添加项目</button>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.content }}
<button @click="removeItem(item.id)">删除</button>
</li>
</ul>
</div>
</template>进阶实现（表单输入动态添加）
1. 绑定输入框
<input v-model="newItemContent" placeholder="输入内容">
<button @click="addItem">添加</button>2. 修改添加方法
data() {
return {
newItemContent: '',
items: []
}
},
methods: {
addItem() {
if (!this.newItemContent.trim()) return
this.items.push({
id: Date.now(),
content: this.newItemContent
})
this.newItemContent = ''
}
}使用 Vue 3 Composition API
import { ref } from 'vue'
setup() {
const items = ref([])
const newItemContent = ref('')
const addItem = () => {
if (!newItemContent.value.trim()) return
items.value.push({
id: Date.now(),
content: newItemContent.value
})
newItemContent.value = ''
}
const removeItem = (id) => {
items.value = items.value.filter(item => item.id !== id)
}
return { items, newItemContent, addItem, removeItem }
}注意事项
- 始终为动态列表设置唯一的
:key属性 - 对于复杂操作，考虑使用 Vuex 或 Pinia 管理状态
- 删除前可添加确认对话框提升用户体验
以上方法适用于大多数需要动态增删元素的场景，可根据实际需求调整数据结构和交互逻辑。
