Vue.js - List Rendering

Vue.js 要渲染多個元素,可使用 v-for。


像是要渲染陣列元素,就可以像下面這樣處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in items">{{item}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
items: [
"1.Hello World",
"2.Hello World",
"3.Hello World",
"4.Hello World",
"5.Hello World"
]
}
})
</script>
</body>
</html>



若有需要索引值,v-for 也有索引值可供使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(item, index) in items">{{index + 1}}. {{item}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
items: [
"Hello World",
"Hello World",
"Hello World",
"Hello World",
"Hello World"
]
}
})
</script>
</body>
</html>



除了陣列元素外,v-for 也支援 range 的方式,可明確指定循環的次數。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="n in 5">{{n}}. Hello World</p>
</div>
<script>
new Vue({
el: '#app',
data:{
}
})
</script>
</body>
</html>



也可以用來遍巡物件元素的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in data">{{item}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
data: {
message: "Hello World"
}
}
})
</script>
</body>
</html>