javascript - 使用 vue.js 动态创建盒子

Question

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

例如:带有

的数组

['101','102','103']

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

Answer 1

为了让您开始使用可能更好、更简单的方法，请查看此 fiddle作者:@bert 在评论中发布

您还可以使用 Render functions这样你就可以使用 javascript 来以编程方式构建你的 html

脚本

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>

这是工作 fiddle

摘要:

• render 函数接收 createElement 作为其参数。
• 此 createElement 用于创建虚拟节点，vue 将这些虚拟节点组合在一起形成虚拟 dOM。然后，该虚拟 DOM 用于创建在页面上呈现的实际 HTML DOM。
• 我们将 prop boxes 传递给 my-boxes 组件，其中包含要渲染的框数组
• 我们通过这个 boxes 属性进行映射，以创建形状像包含文本的红色框的 div 元素的子虚拟节点