在 Vue.js 中,v-for
是一个指令,用于在模板中渲染一个列表的数据。v-for="item in arr"
这个语法中,item
和 arr
分别代表以下含义:
-
item:
item
是当前迭代到的数组元素或对象的别名。在每次迭代中,item
会被赋予arr
中的一个值,这样你就可以在模板中使用item
来访问和显示当前迭代到的数据。- 例如,如果
arr
是一个包含字符串的数组,那么item
在每次迭代中就会是一个字符串。如果arr
是一个对象数组,那么item
就会是数组中的一个对象。
-
arr:
arr
是你想要迭代的数组或可迭代对象。这通常是一个在 Vue 组件的data
、computed
属性或methods
中定义的数组。v-for
会遍历arr
中的每一个元素,并为每个元素创建一个新的模板实例。
举个例子,假设你有以下的 Vue 组件:
<template>
<div>
<ul>
<li v-for="item in arr" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
};
</script>
在这个例子中,v-for="item in arr"
会遍历 arr
数组中的每个对象,每次迭代时,item
就会是数组中的一个对象,然后你可以通过 item.name
来访问和显示该对象的 name
属性。