vue 新创建元素怎么使用v-for

Question

做一个函数
点击button以后，在#a这个div里面生成带v-for的li，能实现我改动data，v-for变化
这个div默认是空的，里面没有li，li需要在函数里面创建
以上需求能否实现？或者有没有替代方案？
代码片段

<script setup>
const a = ref()
const data = ref()
function creatEle (){
}
</script>

<template>
  <div ref="a" id="a"></div>

  <button @click="creatEle"></button>
</template>

Answer 1

<template>
  <div id="a">
    <component v-for="item in data" :key="item.id" :is="'li'" :item="item"></component>
  </div>
  <button @click="createEle">点击创建元素</button>
</template>
<script>
import { ref, createApp } from 'vue';
const app = createApp({
  setup() {
    const data = ref([]);
    function createEle() {
      // 修改data的值，这里只是示例，你可以根据自己的需求修改
      data.value = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
    }
    return {
      createEle,
      data
    };
  }
});
app.component('li', {
  props: ['item'],
  template: '<li>{{ item.name }}</li>'
});
app.mount('#app');
</script>

vue组件动态创建li标签，是这样吗？这是一个示例的demo,看看对你有没有帮助