vue 实现添加删除 div
添加和删除 div 的基本实现
在 Vue 中，可以通过 v-for 和数组操作实现动态添加和删除 div 元素。以下是一个基础示例：
<template>
<div>
<button @click="addDiv">添加 Div</button>
<div v-for="(item, index) in divList" :key="index">
{{ item.content }}
<button @click="removeDiv(index)">删除</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
divList: []
}
},
methods: {
addDiv() {
this.divList.push({
content: `Div ${this.divList.length + 1}`
})
},
removeDiv(index) {
this.divList.splice(index, 1)
}
}
}
</script>使用唯一标识符
为每个 div 分配唯一 ID 可以避免渲染问题：
data() {
return {
divList: [],
nextId: 1
}
},
methods: {
addDiv() {
this.divList.push({
id: this.nextId++,
content: `Div ${this.nextId}`
})
}
}动画效果
可以为添加/删除操作添加过渡动画：
<template>
<div>
<transition-group name="fade" tag="div">
<div v-for="item in divList" :key="item.id">
{{ item.content }}
<button @click="removeDiv(item.id)">删除</button>
</div>
</transition-group>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>复杂内容结构
每个 div 可以包含更复杂的结构和数据：
addDiv() {
this.divList.push({
id: this.nextId++,
title: `标题 ${this.nextId}`,
content: '这里是内容',
timestamp: new Date().toLocaleString()
})
}删除确认
添加删除确认对话框：
removeDiv(id) {
if(confirm('确定要删除吗？')) {
this.divList = this.divList.filter(item => item.id !== id)
}
}这些方法提供了从基础到进阶的 Vue 实现方案，可根据实际需求选择合适的实现方式。
