Vue v-for 指令
示例
使用 v-for 指令根據陣列建立哺乳動物列表
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals based on an array.</p>
<ul>
<li v-for="x in animals">{{ x }}</li>
</ul>
</template>
更多示例請參見下方。
定義和用法
v-for 指令用於根據資料來源渲染多個元素。
v-for 指令使用 "(item, key, index) in dataSource" 語法，其中
"item"別名表示"dataSource"中的一個元素。- 如果資料來源是一個物件，可以使用
"key"別名來獲取屬性名。 - 如果資料來源是陣列或物件，可以使用
"index"別名。 "dataSource"必須是您正在迴圈的實際資料來源的名稱。
您可以自己選擇 "item"、"key" 和 "index" 別名的名稱，但順序是 "item, key, index"。
以下是 v-for 指令可以使用的資料來源
| 資料來源型別 | 詳情 | |
|---|---|---|
陣列 |
v-for 迴圈遍歷陣列，可以取出並使用每個元素的元素和索引。 |
執行示例 » |
物件 |
v-for 迴圈遍歷物件。可以取出並使用屬性名、值和索引。 |
執行示例 » |
數字 |
v-for 渲染一個列表，其中每個項都是從一開始的數字，最後一個數字是提供的數字。也可以取出每個元素的索引。 |
執行示例 » |
string |
v-for 迴圈遍歷字串。可以取出並使用每個字元及其索引。 |
執行示例 » |
可迭代物件 |
v-for 也可以迴圈遍歷可迭代物件。可迭代物件是使用可迭代協議的值，例如 Map 和 Set。 |
執行示例 » |
注意： 為了最佳化效能，當資料來源被操作時，Vue 會重用使用 v-for 建立的元素。這可能會導致奇怪的結果（此處解釋）。為了防止 Vue 在使用 v-for 時錯誤地重用元素，您應該始終使用特殊的 key 屬性和 v-bind 來唯一標識每個元素（參見示例 6）。
更多示例
示例 1
使用 v-for 指令根據陣列渲染哺乳動物列表，並獲取陣列中每個元素的索引
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals, and the index of each mammal, based on an array.</p>
<ul>
<li v-for="(x, index) in animals">On index {{ index }}: "{{ x }}"</li>
</ul>
</template>
<script>
export default {
data() {
return {
animals: ['Tiger','Zebra','Wolf','Crocodile','Seal']
};
}
};
</script>
示例 2
使用 v-for 指令渲染屬性列表，取出物件中每個屬性的屬性名和值
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive on an Object to create a list of the object properties and the respective property values.</p>
<ul>
<li v-for="(x, key) in animal">(Property name: value) = ({{ key }}: {{ x }})</li>
</ul>
</template>
<script>
export default {
data() {
return {
animal: {
name: 'Lion',
heightCM: 110,
weightKG: 150
}
};
}
};
</script>
示例 3
使用 v-for 指令根據數字渲染列表
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with number to render a list with that number of elements.</p>
<ul>
<li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
</ul>
</template>
示例 4
使用 v-for 指令迴圈遍歷字串中的字元
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to loop through the characters in a string.</p>
<ul>
<li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
</ul>
</template>
示例 5
使用 v-for 指令迴圈遍歷使用可迭代協議建立的物件
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to render a list, based on an object created with the Iterable Protocol.</p>
<ul>
<li v-for="value in iterableObject">{{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
iterableObject: this.createIterable(['City', 'Park', 'River'])
};
},
methods: {
createIterable(array) {
let currentIndex = -1;
return {
[Symbol.iterator]: function () {
return {
next: () => {
if (currentIndex < array.length - 1) {
currentIndex++;
return { value: array[currentIndex], done: false };
} else {
return { done: true };
}
}
};
}
};
}
}
};
</script>
示例 6
使用 v-for 指令為字串中的每個字元渲染一個 div 元素。始終建議將 v-bind:key 與 v-for 指令一起使用
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with 'v-bind:key' to render DIV elements, based on a string of characters.</p>
<div id="wrapper">
<div v-for="x in text" v-bind:key="x">{{ x }}</div>
</div>
</template>
<script>
export default {
data() {
return {
text: 'I love ice cream.'
};
}
};
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
width: 280px;
}
#wrapper > div {
margin: 5px;
padding: 5px 10px;
border: solid black 1px;
background-color: lightgreen;
}
</style>
相關頁面
JavaScript 教程： JS 可迭代物件
Vue 教程： Vue v-for 指令
Vue 教程： Vue v-for 元件
Vue 教程: Vue v-for 動畫
Vue 參考： Vue 'key' 屬性
