使用 vue.js 动态创建盒子

Question

I wanted to create square boxes dynamically, based on number of array entries using vue.js.

eg: An array with

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

are passed from browser console to vue.js script, then three square boxes with text 101 on the first box and so on should be created.

Answer 1

To get you started and probably the better and easier method check out this fiddle by @bert posted in comment

you can also make use of Render functions so that you get powers of javascript to programmatically build your html

script

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"]
        }
    }
})

template

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

Here is the working fiddle

Summary:

• render function receives createElement as its argument.
• This createElement is used to create virtual nodes which vue puts together form a virtual dOM. This virtual DOM is then used to create the actual HTML DOM which gets rendered o the page.
• We pass a prop boxes to my-boxes component which contains the array of boxes to render
• we map through this boxes prop to create child virtual nodes of div elements shaped like a red box containing the text