uni-app中使用列表渲染v-for
在 v-for 里使用数组
v-for 指令可以实现基于一个数组来渲染一个列表。
v-for
指令需要使用item in items
形式的特殊语法,其中items
是源数据数组,而item
则是被迭代的数组元素的别名。- 第一个参数
item
则是被迭代的数组元素的别名。 - 第二个参数,即当前项的索引
index
,是可选的。
- 第一个参数
<template> <view> <view v-for="(item, index) in items"> {{ index }} - {{ item.message }} </view> </view> </template> <script> export default { data() { return { items: [ { message: 'Foo' }, { message: 'Bar' } ] } } } </script>
在 v-for 里使用对象
你也可以用 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>
列表渲染分组
类似于 v-if
,你也可以利用带有 v-for
的 template
来循环渲染一段包含多个元素的内容。比如:
<template v-for="item in items"> <view>{{ item.message }}</view> <view class="divider" role="presentation"></view> </template>
key
当 Vue 正在更新使用 v-for
渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input
中的输入内容,switch
的选中状态),需要使用 :key
来指定列表中项目的唯一的标识符。
:key
的值以两种形式提供
- 使用
v-for
循环array
中item
的某个property
,该property
的值需要是列表中唯一的字符串或数字,且不能动态改变。 - 使用
v-for
循环中item
本身,这时需要item
本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 :key,会报一个
warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
示例:
<template> <view> <!-- array 中 item 的某个 property --> <view v-for="(item,index) in objectArray" :key="item.id"> {{index +':'+ item.name}} </view> <!-- item 本身是一个唯一的字符串或者数字时,可以使用 item 本身 --> <view v-for="(item,index) in stringArray" :key="item"> {{index +':'+ item}} </view> </view> </template> <script> export default { data () { return { objectArray:[{ id:0, name:'li ming' },{ id:1, name:'wang peng' }], stringArray:['a','b','c'] } } } </script>
注意事项
- 在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 的数据(相关反馈)。
在组件上使用 v-for
在自定义组件上,你可以像在任何普通元素上一样使用 v-for
。
<my-component v-for="item in items" :key="item.id"></my-component>
当在组件上使用 v-for 时,key是必须的。
uni-app
支持在 template 模板中嵌套 <template/>
和 <block/>
,用来进行 列表渲染 和 条件渲染。
<template/>
和 <block/>
并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
<block/>
在不同的平台表现存在一定差异,推荐统一使用 <template/>
。
<template> <view> <block v-for="(item,index) in list" :key="index"> <view>{{item}} - {{index}}</view> </block> </view> </template>
列表渲染同样推荐使用<template/>