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 教程: Vue 使用 v-for 的动画