Vue.js入门笔记 v-for循环
可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 循环普通数组
<div id="app">
<p v-for="(item, i) in data">
索引是{{ i }} --- 内容是{{ item }}
</p>
</div>
js：
data : {
data : [1,2,3,4,5],
},v-for 循环对象数组
<div id="app">
<p v-for="(item, i) in data1">
索引是:{{ i }} -- - 内容是{{ item.id }}--{{ item.name }}
</p>
</div>
js：
data: {
data1: [
{ id: 1, name: "name1" },
{ id: 2, name: "name2" },
{ id: 3, name: "name3" }
]
},v-for 循环对象
<div id="app">
<p v-for="(data, key, i) in user">
索引：{{ i }}，键值：{{ key }},内容：{{ data }}
</p>
</div>
js：
data: {
user: {
id: 1,
name: "tim",
age: 18,
width: 200
}
},v-for 迭代数字
<div id="app">
<p v-for="count in 10">{{ count }}</p>
</div>2.2.0+ 的版本里，当在组件上使用
v-for时，key现在是必须的。
不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
本文链接：https://cloud.tencent.com/developer/article/1558552
本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录