Vue v-for 指令
Jihongchang(讨论 | 贡献)2023年8月8日 (二) 06:11的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=15
根据数据生成列表结构
形式1:
<div id="app">
<ul>
<li v-for="item in arr">
你好
</li>
</ul>
</div>
形式2:
<div id="app">
<ul>
<li v-for="item in arr" :title="item">
{{item}}
</li>
</ul>
</div>
形式3:
<div>
<ul>
<li v-for="(item,index) in arr" :title="item">
{{index}}{{ item }}
</li>
</ul>
</div>
对于对象:
<div id="app">
<ul>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})