“Vue v-for 指令”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
第8行: | 第8行: | ||
<li v-for="item in arr"> | <li v-for="item in arr"> | ||
你好 | 你好 | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </syntaxhighlight>形式2:<syntaxhighlight lang="html"> | ||
+ | <div id="app"> | ||
+ | <ul> | ||
+ | <li v-for="item in arr" :title="item"> | ||
+ | {{item}} | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </syntaxhighlight>形式3:<syntaxhighlight lang="html"> | ||
+ | <div> | ||
+ | <ul> | ||
+ | <li v-for="(item,index) in arr" :title="item"> | ||
+ | {{ item }} | ||
</li> | </li> | ||
</ul> | </ul> |
2023年8月8日 (二) 05:55的版本
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">
{{ item }}
</li>
</ul>
</div>
<div id="app">
<ul>
<li v-for="item in arr" :title="title">
{{ item }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})