用 v-for 来遍历一个对象的 property
。
- 第一个参数
value
是被迭代的数组元素的别名。 - 第二个参数为
property
名称 (也就是键名)。 - 第三个参数作为索引。
<template> <view> <view v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </view> </view> </template> <script> export default { data() { return { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2020-04-10' } } } } </script>
结果
0.title: How to do lists in Vue,
1.author: Jane Doe,
2.publishedAt: 2020-04-10
- 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如
v-for="(item, index) in 10"
中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。 - 在非H5平台 循环对象时不支持第三个参数,如
v-for="(value, name, index) in object"
中,index 参数是不支持的。 - 小程序端数据为差量更新方式,由于小程序不支持删除对象属性,使用的设置值为 null 的方式替代,导致遍历时可能出现不符合预期的情况,需要自行过滤一下值为 null 的数据