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:

FoodItem.vue:

要知道我们需要 key 属性，让我们创建一个删除数组中第二个元素的按钮。 发生这种情况时，如果没有 key 属性，收藏夹的图像将从"Fish"元素转移到"Cake"元素，这是不正确的:

示例

与前面示例的唯一区别是我们添加了一个按钮:

Remove Item

和一个方法:

methods: {
  removeItem() {
    this.foods.splice(1,1);
  }
}

in App.vue.

如前所述:当删除元素时收藏夹的图像从"鱼"变成"蛋糕"的错误与 Vue 通过重用元素来优化页面有关，同时 Vue 无法完全分辨 元素分开。 这就是为什么我们在使用 v-for 生成元素时应该始终包含 key 属性来唯一标记每个元素。 当我们使用 key 属性时，我们不再遇到这个问题。

我们不使用数组元素索引作为 key 属性值，因为当删除和添加数组元素时索引会发生变化。 我们可以创建一个新的数据属性来为每个项目保留唯一的值，例如 ID 号，但由于食品已经有唯一的名称，我们可以使用它:

示例

我们只需要在 App.vue 中添加一行来唯一标识使用 v-for 创建的每个元素即可解决问题:

Vue 练习

="x.id"
  :fish-name="x.name"
  :img-url="x.url"
/>