v-for

原创已于 2023-12-17 08:58:51 修改 · 394 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#java #服务器 #windows

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

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

写法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>