Vue v-for 组件
组件可以使用 v-for 重复使用，以生成许多相同类型的元素。
当使用 v-for 从组件生成元素时，根据数组中的值动态分配传递属性也非常有用。
使用 v-for 创建组件元素
我们现在将使用 v-for 基于包含食物名称的数组来创建组件元素。
示例
App.vue:
<template>
<h1>Food</h1>
<p>Components created with v-for based on an array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
v-bind:food-name="x"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: ['Apples','Pizza','Rice','Fish','Cake']
};
}
}
</script>FoodItem.vue:
<template>
<div>
<h2>{{ foodName }}</h2>
</div>
</template>
<script>
export default {
props: ['foodName']
}
</script>v-bind 简写
要动态绑定传递属性，我们使用 v-bind，并且由于我们现在将比以前更多地使用 v-bind，因此我们将在本教程的其余部分中使用 v-bind: 简写 :。
'key' 属性
如果我们在使用 v-for 创建元素后修改数组，由于 Vue 更新使用 v-for 创建的此类元素的方式，可能会出现错误。Vue 重用元素以优化性能，因此如果我们删除一个项目，则会重用已存在的元素而不是重新创建所有元素，并且元素属性可能不再正确。
元素被错误重用的原因是元素没有唯一的标识符，这就是我们使用 key 属性的原因：让 Vue 区分元素。
我们将在没有 key 属性的情况下生成错误行为，但首先让我们使用 v-for 构建一个带有食物的网页以显示：食物名称、描述、最爱食物的图像以及更改最爱状态的按钮。
示例
App.vue:
<template>
<h1>Food</h1>
<p>Food items are generated with v-for from the 'foods' array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: [
{ name: 'Apples',
desc: 'Apples are a type of fruit that grow on trees.',
favorite: true },
{ name: 'Pizza',
desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.',
favorite: false },
{ name: 'Rice',
desc: 'Rice is a type of grain that people like to eat.',
favorite: false }
{ name: 'Fish',
desc: 'Fish is an animal that lives in water.',
favorite: true }
{ name: 'Cake',
desc: 'Cake is something sweet that tastes good.',
favorite: false }
]
};
}
}
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper > div {
border: dashed black 1px;
flex-basis: 120px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>FoodItem.vue:
<template>
<div>
<h2>
{{ foodName }}
<img src="/img_quality.svg" v-show="foodIsFavorite">
</h2>
<p>{{ foodDesc }}</p>
<button v-on:click="toggleFavorite">Favorite</button>
</div>
</template>
<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
data() {
return {
foodIsFavorite: this.isFavorite
}
},
methods: {
toggleFavorite() {
this.foodIsFavorite = !this.foodIsFavorite;
}
}
}
</script>
<style>
img {
height: 1.5em;
float: right;
}
</style>为了看到我们需要 key 属性，让我们创建一个按钮来删除数组中的第二个元素。当发生这种情况时，如果没有 key 属性，最爱图像将从 'Fish' 元素转移到 'Cake' 元素，而这是不正确的。
示例
与上一个示例唯一的区别是我们在 App.vue 中添加了一个按钮
<button @click="removeItem">Remove Item</button>和一个方法
methods: {
removeItem() {
this.foods.splice(1,1);
}
}。
运行示例 »如前所述：这种错误，即在删除元素时最爱图像从 'fish' 更改为 'cake'，与 Vue 通过重用元素优化页面有关，同时 Vue 也无法完全区分元素。这就是为什么我们应该始终包含 key 属性，以便在使用 v-for 生成元素时唯一标记每个元素。当我们使用 key 属性时，我们不再遇到此问题。
我们不使用数组元素索引作为 key 属性值，因为当数组元素被删除和添加时，索引会发生变化。我们可以创建一个新的数据属性来为每个项目保留一个唯一值，例如 ID 号，但由于食物项目已经具有唯一的名称，我们可以直接使用该名称。
示例
我们只需要在 App.vue 中添加一行代码来唯一标识使用 v-for 创建的每个元素并解决问题。
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
/>
