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 实现方案，可根据实际需求选择合适的实现方式。