v-for + 陣列資料
1
2
3
4
5
|
<div id="app">
<ul>
<li v-for="(item,key) in fruits">{{ key + 1 }} - {{item.name}}/{{ item.price }}元</li>
</ul>
</div>
|
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
|
const fruits = [
{
name: "蘋果",
price: 15,
amount: 50
},
{
name: "香蕉",
price: 20,
amount: 30
},
{
name: "鳳梨",
price: 35,
amount: 100
}
]
Vue.createApp({
data(){
return{
fruits: fruits,
}
}
}).mount("#app");
|
顯示結果：
1
2
3
4
5
6
7
|
<div id="app">
<ul>
<li>1 - 蘋果/15元</li>
<li>2 - 香蕉/20元</li>
<li>3 - 鳳梨/35元</li>
</ul>
</div>
|
v-for + 物件資料
1
2
3
4
5
|
<div id="app">
<ul>
<li v-for="(item,key) in fruits">{{ key }} - {{item.name}}/{{ item.price }}元</li>
</ul>
</div>
|
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
|
const fruits = {
apple:{
name: "蘋果",
price: 15,
amount: 50
},
banana:{
name: "香蕉",
price: 20,
amount: 30
},
pineapple:{
name: "鳳梨",
price: 35,
amount: 100
}
}
Vue.createApp({
data(){
return{
fruits: fruits,
}
}
}).mount("#app");
|
顯示結果：
1
2
3
4
5
6
7
|
<div id="app">
<ul>
<li>apple - 蘋果/15元</li>
<li>banana - 香蕉/20元</li>
<li>pineapple - 鳳梨/35元</li>
</ul>
</div>
|
v-for 純數字
1
2
3
4
5
|
<div id="app">
<ul>
<li v-for="item in 4">{{ apple }}</li>
</ul>
</div>
|
1
2
3
4
5
6
7
8
|
Vue.createApp({
data(){
return{
apple: "蘋果"
}
}
}).mount("#app");
|
v-for + key
當有相同父元素的子元素必須有獨特的key，重複的key會造成錯誤
1
2
3
4
5
6
7
8
|
<div id="app">
<ul>
<li v-for="item in fruits" v-bind:key="item.name">{{ item.name }}
<input type="text">
</li>
</ul>
<button type="button" @click="reverseArray">反轉按鈕</button>
</div>
|
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
27
28
29
30
|
const fruits = [
{
name: "蘋果",
price: 15,
amount: 50
},
{
name: "香蕉",
price: 20,
amount: 30
},
{
name: "鳳梨",
price: 35,
amount: 100
}
]
Vue.createApp({
data(){
return{
fruits: fruits
}
},
methods:{
reverseArray(){
this.fruits.reverse();
}
}
}).mount("#app");
|
如果沒有加上v-bind:key="item.name"，在input裡輸入值後，點擊按鈕會出錯
v-for + table + template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div id="app">
<table>
<template v-for="item in fruits">
<tr>
<td>{{ item.name }}</td>
</tr>
<tr>
<td>{{ item.price }}元</td>
</tr>
<tr>
<td>{{ item.import ? '進口':'本土' }}</td>
</tr>
</template>
</table>
</div>
|
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
|
const fruits = [
{
name: "蘋果",
price: 15,
import: true
},
{
name: "香蕉",
price: 20,
import: true
},
{
name: "鳳梨",
price: 35,
import: false
}
]
Vue.createApp({
data(){
return{
fruits: fruits
}
}
}).mount("#app");
|
<template>可用來包覆需要重複的標籤
其他相關