Vue中指令v-for的key值

Lemon今天学习了吗

已于 2022-02-21 13:43:02 修改

阅读量877

点赞数 2

分类专栏： vue 文章标签： vue.js 前端

于 2022-02-21 09:51:49 首次发布

本文链接：https://blog.csdn.net/weixin_47978760/article/details/123039807

版权

vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

1.为什么要使用key值？

没有唯一标识key属性时，状态默认绑定的是位置；

有唯一标识key属性时，状态根据key的属性值绑定到了相应的数组元素，vue会基于key的变化重新排列元素顺序，避免去遍历dom造成的性能的消耗。

2.使用key的注意事项：

唯一标识key可以是item里面id、index等，当key需要使用index的时候，注意需要为不同的key。

<!--这种写法可能浏览器存在报错-->
<template v-for="(item,index) in data" >
    <div :key="index">{{item.name}}</div>
    <div :key="index">{{item.value}}</div>
</template>

<!--修正浏览器error的写法-->
<template v-for="(item,index) in data" >
    <div :key="`index_f_${index}`">{{item.name}}</div>
    <div :key="`index_s_${index}`">{{item.value}}</div>
</template>