正文

vue key

IP云
IP云V管理员/2 阅读
07/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

  • 完整地触发组件的生命周期钩子
  • 触发过渡

<transition>
<span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。

更新：2019.1.7

对于数组最好使用数组的item（真正的值），而不是index。因为index都是从0到数组的长度，不唯一，容易造成渲染错误。