vue中v-for的细节

北极糊的狐

于 2024-12-01 09:28:29 发布

阅读量340

点赞数 2

分类专栏：前端总结代码记录文章标签： vue.js windows javascript

本文链接：https://blog.youkuaiyun.com/SSHLY3/article/details/144165049

版权

前端总结同时被 2 个专栏收录

72 篇文章

订阅专栏

代码记录

29 篇文章

订阅专栏

<li v-for="(item,index)in list" >
<li v-for="(item)in list" >不需要使用下标时,可省略下标
<li v-for="item in list" >甚至括号都可以不写
<li v-for="(item,index)in list"  :key="item.id">但最好把key加上,有id就用id

通过在vue控制台调试可以发现v-for默认行为会尝试原地修改元素,比如原地修改了书架数据后,并不知道删的是哪个li的位置,就依旧把剩余的三个li的数据塞回前三个li进去了,而第一个li的背景颜色依然是粉色

所以在使用v-for时,还是要把唯一标识key加上,这样才能正确区分识别到每一个元素,不然需要前两个就只是直接放进去前两个的位置

注意点:

1.key 的值只能是字符串或数字类型

2.key 的值必须具有唯一性

3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)

2023.2.5 2024.11.12修改