gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:15:33 24 4
gpt4 key购买 nike

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

例如:带有

的数组

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

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

最佳答案

为了让您开始使用可能更好、更简单的方法,请查看此 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 元素的子虚拟节点

关于javascript - 使用 vue.js 动态创建盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49381895/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com