vue3动态添加div

在Vue3中，你可以在组件的模板中使用v-for指令遍历数据并渲染div元素，也可以使用Vue提供的动态组件(component)来动态渲染不同的组件。另外，你还可以利用Vue3的响应式数据特性，在组件的方法中动态添加div元素。下面是一个简单的示例代码：

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

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const divList = reactive([]) // 响应式数据

    const addDiv = () => {
      divList.push('new div') // 动态向响应式数据中添加元素
    }

    return {
      divList,
      addDiv
    }
  }
}
</script>

在上面的代码中，我们使用Vue3提供的响应式函数`reactive`来创建一个空数组`divList`，然后在`addDiv`方法中，动态向`divList`数组中添加元素。最后，在模板中使用`v-for`指令遍历`divList`数组并渲染div元素。每次点击“添加div”按钮，就会在页面中动态添加一个新的div元素。