构造 v-for 循环时 :key 和 v-bind:key 有啥区别？

Posted 2023-02-16

【中文标题】构造 v-for 循环时 :key 和 v-bind:key 有啥区别？

【英文标题】：What is the difference between :key and v-bind:key when constructing a v-for loop?构造 v-for 循环时 :key 和 v-bind:key 有什么区别？

【发布时间】：2019-08-01 23:05:24

【问题描述】：

在 Vue 文档中有使用 key 关键字的示例，在 v-for 循环中定义键时同时使用 :key= 和 v-bind:key=。一个只是另一个的语法糖，还是他们做不同的事情？

Examples from the docs using both types:

:key

<my-component v-for="item in items" :key="item.id"></my-component>

v-bind:key

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

【参考方案1】：

:key= 和v-bind:key= 完全相同。

来源：https://vuejs.org/v2/api/#v-bind

v-bind

简写：:

【讨论】：

与@click 和 v-on:click 相同