Vue 'key' 属性


示例

key 属性用于 food-item 组件,以唯一标识使用 v-for 创建的每个元素。

<food-item
  v-for="x in foods"
  :key="x.name"
  :food-name="x.name"
  :food-desc="x.desc"
  :is-favorite="x.favorite"
/>
运行示例 »

定义和用法

key 属性与 v-for 指令一起使用,以便 Vue 可以正确区分元素。

Vue 通过重用元素来优化性能。 因此,当使用 v-for 从数组创建元素时,如果不使用 key 属性,则在修改数组时可以混合元素属性。

有关更彻底的解释以及不使用 key 属性时出现问题的示例,请参阅 Vue 教程中的 "key"属性 章节。


相关页面

Vue 教程:Vue v-for 指令

Vue 教程:Vue v-for 组件

Vue 教程:使用 v-for 的 Vue 动画