<template>
<div>
<ul>
<template v-for="item in items">
<li v-if="item.flag">
<!-- []DemoModel -->
<component :is="item.model"></component>
</li>
<li v-else >{{ item.text }}</li>
</template>
</ul>
</div>
</template>
<script>
// DemoModel 1-n
import DemoModel1 from "./demo-model1";
// ...
import DemoModelN from "./demo-modeln";
export default {
data() {
return {
items:[
{
text: "item 1",
flag: false
},
// ...
{
text: "item n", // n > 100html
flag: false
},
{
text: "model 1",
flag: true,
model: DemoModel1
},
// ...
{
text: "model n",
flag: true,
model: DemoModelN
},
]
}
},
components: {
DemoModel1,
//...
DemoModelN
}
}
</script>now I need to create components dynamically. The above code is a simplified version. How can I implement it?