在Vue中,v-for
指令用于基于一个数组来渲染一个列表。它需要使用item in items
形式的特殊语法,其中items
是源数据数组,而item
是被迭代的数组元素的别名。v-for
还支持一个可选的第二个参数,即当前项的索引。
以下是v-for
的一些使用实例:
循环数组
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }} - {{ item.message }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
};
}
}
</script>
循环对象的属性
<template>
<div>
<div v-for="(value, key, index) in object" :key="index">
{{ index }}. {{ key }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
};
}
}
</script>
循环数字范围
<template>
<div>
<span v-for="number in 10" :key="number">
{{ number }}
</span>
</div>
</template>
在这些例子中,:key
是一个重要的属性,它用于给每个节点提供一个唯一的标识,帮助Vue跟踪和重用现有元素,从而优化DOM的更新性能。
请注意,当使用v-for
时,应该避免同时使用v-if
,因为v-for
比v-if
具有更高的优先级。如果需要同时使用,可以将v-if
放置在包裹v-for
的元素上,或者使用计算属性来过滤列表。