Vue v-for 组件
v-bind 简写
为了动态绑定 props，我们使用 v-bind，并且因为我们现在比以前更多地使用 v-bind，所以我们将在本教程的其余部分使用 v-bind: 简写 :。
"key" 属性
如果我们在使用 v-for 创建元素后修改数组，由于 Vue 更新使用 v-for 创建的元素的方式，可能会出现错误。 Vue 重用元素来优化性能，因此如果我们删除一个项目，则会重用现有元素，而不是重新创建所有元素，并且元素属性可能不再正确。
元素被错误重用的原因是元素没有唯一标识符，而这正是我们使用 key 属性 for: 来让 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"元素，这是不正确的:
示例
与前面示例的唯一区别是我们添加了一个按钮:
<button @click="removeItem">Remove Item</button>和一个方法:
methods: {
removeItem() {
this.foods.splice(1,1);
}
}in App.vue.
如前所述:当删除元素时收藏夹的图像从"鱼"变成"蛋糕"的错误与 Vue 通过重用元素来优化页面有关，同时 Vue 无法完全分辨 元素分开。 这就是为什么我们在使用 v-for 生成元素时应该始终包含 key 属性来唯一标记每个元素。 当我们使用 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"
/>
