Question

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

例如：带

的数组

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

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

Answer 1

为了帮助您入门，可能是更好更简单的方法，请在评论中发布 @bert 查看此fiddle

您还可以使用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，该DOM将在页面中呈现。
我们将道具boxes传递给my-boxes组件，其中包含要呈现的框数组
我们通过这个boxes道具来创建div元素的子虚拟节点，形状像一个包含文本的红框

使用vue.js动态创建框

1 个答案: