Javascript 使用vue.js动态创建长方体

我想使用vue.js根据数组条目的数量动态创建方形框

一个带有

['101'，'102'，'103']

---

从浏览器控制台传递到vue.js脚本，然后应创建三个方形框，第一个框上有文本101，依此类推

若要开始，也许是更好更简单的方法，请查看@bert在评论中发布的这篇文章

您还可以利用，以便获得javascript的强大功能，以编程方式构建html

剧本

模板

这是工作票

总结：

render函数接收createElement作为其参数。 此createElement用于创建虚拟节点，vue将这些节点组合在一起形成虚拟dOM。然后使用这个虚拟DOM创建实际的HTML DOM，并将其呈现到页面上。 我们将道具盒传递给my Box组件，该组件包含要渲染的盒阵列 我们通过这个box prop映射来创建div元素的子虚拟节点，其形状类似于包含文本的红色框

---

你想这么做，好吗。你试过这么做吗？你面临什么问题？我试图创建一个数组中发送的框，并使用v-for属性。我试图将数组['101'，'102']从浏览器控制台发送到vue脚本，这样就不会使用硬编码。我还在想，在阵列上只做一个v-for怎么样？对于像我这样的新手来说，这是一个复杂的答案。我将学习这些概念谢谢@VamsiKrishna@PrasannaSrinivasan我最近在我的项目中使用了很多渲染函数。。。所以我首先想到的是。。。但伯特的小提琴更合适-即使我对@Bert做了同样的v-for，现在我正在尝试从浏览器控制台向vue脚本提供输入。有人能告诉我如何将数组元素作为对应DOM方块的id吗？

Vue.component("my-boxes", {
    props: ["boxes"],
    render(createElement){

        return createElement("div",
            this.boxes.map((box) => {
              return createElement('div', {
                  style: {width: "50px", height: "50px", border: "1px solid red", margin: "5px"}
              }, box);
            })
        )
    }
})

new Vue({
    el: "#app",
    data(){
        return{
            myArr: ["101", "102", "103"]
        }
    }
})

<div id="app">
    <my-boxes :boxes="myArr"></my-boxes>
</div>