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 渲染一个列表，其中每个项目都是从一个开始的数字，最后一个数字是提供的数字。还可以提取每个元素的索引。 |
运行示例 » |
字符串 |
v-for 循环遍历字符串。可以提取并使用每个字符及其索引。 |
运行示例 » |
可迭代对象 |
v-for 还可以循环遍历可迭代对象。可迭代对象是使用可迭代协议的值，例如 Map 和 Set。 |
运行示例 » |
注意：为了优化性能，当数据源被操作时，Vue 会重用使用 v-for 创建的元素。这会导致奇怪的结果 (此处解释)。为了防止 Vue 在使用 v-for 时错误地重用元素，你应该始终使用带有 v-bind 的特殊 key 属性来唯一标记每个元素 (请参见示例 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-for 指令中使用 v-bind:key
<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' 属性
