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' 属性
