Vue v-for 指令
示例
使用 v-for 指令基于数组创建哺乳动物列表:
<template>
<h2>v-for 指令示例</h2>
<p>使用 v-for 指令基于数组创建哺乳动物列表。</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 指令可以使用的数据源:
| 数据源类型 | 详细信息 | |
|---|---|---|
Array |
v-for 循环遍历数组，可以选出元素以及每个元素的索引并使用。 |
运行示例 » |
Object |
v-for 循环遍历对象。 可以挑选并使用属性名称、值和索引。 |
运行示例 » |
number |
v-for 呈现一个列表，其中每个项目都是从一开始的数字，最后一个数字是提供的数字。 还可以选出每个元素的索引。 |
运行示例 » |
string |
v-for 循环遍历字符串。 每个字符及其索引都可以被挑选出来并使用。 |
运行示例 » |
Iterable |
v-for 也可以循环迭代。 可迭代对象是使用可迭代协议的值，例如 Map 和 Set。 |
运行示例 » |
注意:为了优化性能，当数据源被操作时，Vue 会重用使用 v-for 创建的元素。 这可能会导致奇怪的结果（此处解释）。 为了防止 Vue 在使用 v-for 时错误地重用元素，您应该始终将特殊的 key 属性与 v-bind 一起使用，以唯一地标记每个元素（参见示例 6）。
更多示例
示例 1
使用 v-for 指令基于数组呈现哺乳动物列表，并选取数组中每个元素的索引:
<template>
<h2>v-for 指令示例</h2>
<p>使用 v-for 指令基于数组创建哺乳动物列表以及每个哺乳动物的索引。</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>v-for 指令示例</h2>
<p>在对象上使用 v-for 指令来创建对象属性和相应属性值的列表。</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>v-for 指令示例</h2>
<p>使用 v-for 指令和 number 来渲染包含该数量元素的列表。</p>
<ul>
<li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
</ul>
</template>
示例 4
使用 v-for 指令循环遍历字符串:
<template>
<h2>v-for 指令示例</h2>
<p>使用 v-for 指令循环遍历字符串中的字符。</p>
<ul>
<li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
</ul>
</template>
示例 5
使用 v-for 指令循环遍历使用可迭代协议创建的对象:
<template>
<h2>v-for 指令示例</h2>
<p>使用 v-for 指令基于使用可迭代协议创建的对象来呈现列表。</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>v-for 指令示例</h2>
<p>使用 v-for 指令和 'v-bind:key' 来基于字符串呈现 DIV 元素。</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 教程:使用 v-for 的 Vue 动画
Vue 参考:Vue 'key' 属性
