v-for

kevin_cat

已于 2023-12-17 08:58:51 修改

阅读量374

点赞数 8

CC 4.0 BY-SA版权

文章标签： java 服务器 windows

于 2023-12-17 08:52:28 首次发布

本文链接：https://blog.youkuaiyun.com/kevin_cat/article/details/135041369

本文讨论了在Vue.js中使用v-for指令时，如何正确设置`key`属性以确保数据绑定的唯一性和避免重复警告。强调了将id作为key值的重要性，以及在HTML和.vue文件中处理key的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写法1：(简单写)
<tr v-for="item in list">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>

写法2：(传2个参数)
<tr v-for="(item，index) in list">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>


其他3：
<!--官方建议：只要用到v-for指令，那么一定要绑定一个：key属性-->
<!--而且尽量把id作为key的值,应为id具有唯一性，不能用索引index,不具有唯一性-->
<!--管方对key的值类型，是有要求的：字符串或数字类型-->
<!--html文件中不加不报错，但是在.vue中不加会报错：报 Duplicate keys detectd-->
<tr v-for="(item，index) in list"  :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>