vue实现添加div

动态添加 div 的方法

模板中使用 v-for 通过数据驱动视图，在模板中使用 v-for 循环渲染多个 div：

<template>
  <div v-for="(item, index) in divList" :key="index">
    {{ item.content }}
  </div>
  <button @click="addDiv">添加Div</button>
</template>

<script>
export default {
  data() {
    return {
      divList: []
    }
  },
  methods: {
    addDiv() {
      this.divList.push({ content: `新Div ${this.divList.length + 1}` })
    }
  }
}
</script>

使用 ref 操作 DOM 通过 Vue 的 ref 直接操作 DOM 元素：

<template>
  <div ref="container"></div>
  <button @click="appendDiv">添加Div</button>
</template>

<script>
export default {
  methods: {
    appendDiv() {
      const newDiv = document.createElement('div')
      newDiv.textContent = '动态添加的Div'
      this.$refs.container.appendChild(newDiv)
    }
  }
}

使用渲染函数 (render function) 通过 JavaScript 的渲染函数动态创建元素：

<script>
export default {
  data() {
    return {
      divCount: 0
    }
  },
  render(h) {
    const children = []
    for (let i = 0; i < this.divCount; i++) {
      children.push(h('div', `Div ${i + 1}`))
    }
    return h('div', [
      ...children,
      h('button', {
        on: {
          click: () => this.divCount++
        }
      }, '添加Div')
    ])
  }
}
</script>

注意事项

• 使用 v-for 时需为每个项添加唯一的 key
• 直接操作 DOM 可能违反 Vue 的数据驱动原则
• 动态添加的元素同样受 Vue 响应式系统管理
• 复杂场景建议使用组件化方式实现

以上方法可根据具体需求选择，数据量较大时推荐使用 v-for 方式，需要精细控制 DOM 时可采用 ref 或渲染函数。