Vue.js入门笔记 v-for循环

v-for 循环普通数组

1
2
3
4
5
6
7
8
9
<div id="app">
<p v-for="(item, i) in data">
索引是 { { i } } --- 内容是 { { item } }
</p>
</div>
js:
data : {
data : [1,2,3,4,5],
},

v-for 循环对象数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 循环对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 迭代数字

1
2
3
<div id="app">
<p v-for="count in 10"> { { count } } </p>
</div>
  • 2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。

不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

原文链接:debug客栈