vue v-for 列表渲染指令注意

KLW752025-12-28 15:36

v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。

数组情况

复制代码

v-for="(item,index)in array"

令遍历一个对象时，遍历的是对象自身所有可遍历的属性

复制代码

v-for="(value,name)in obj"

value为被遍历的obj对象的属性值，name为属性名

3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值

复制代码

V-for="value in n"

注意事项

Vue官方建议在使用v-for指令进行列表渲染时，最好同时指定唯一的key属性。这个key属性可以提高列表更新渲染的性能，且key属性的值最好不要使用下标，因为某个数组元素的下标是不稳定的，这样会影响内部DOM Diff算法的效率，甚至有可能产生错误的效果。key属性的值应该是数组元素对应的稳定的数值或字符串值，比如数组元素的id属性。