小程序`uin-app`之列表循环
Posted 理小理...
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序`uin-app`之列表循环相关的知识,希望对你有一定的参考价值。
首先:
我们 先来复习一下vue
的列表循环 。
通过
v-for
指令基于一个数组来渲染一个列表。基础语法就是
v-for="(item,index )in items" :key="index"
key
值的作用就是作为列表循环中列表项的唯一值,可以使下标,也可以是id
值。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
item.message
</li>
</ul>
var example1 = new Vue(
el: '#example-1',
data:
items: [
message: 'Foo' ,
message: 'Bar'
]
)
通过简单的复习,可以对Vue
的列表渲染有了重新的了解。
uin-app
列表渲染
在小程序中uin-app
的语法在很大程度上是相似于Vue
的,所以这就很方便我们的了解了。
/*
vue语法: <view v-for="(item,index) in arr"></view>
语法: wx:for="数组或者对象" wx:for-item="循环项" wx:for- index="循环项的索引"
1.当只是简单的遍历数组的时候 可以省略wx:for-item和wx:for-index 小程序会自动的生成
2. wx:key 唯一的值 作用: 用来提高列表渲染的性能
1). wx:key="*this" *this表示的是item本身
2). 绑定一个在数据中 永不相同的字符串或者数据 (唯一值 与vue中的key是一样)
3). 必须确保key值是唯一的并且不参与数据双向
3. 遍历对象的时候 for-item表示的是对象的属性值(value) for-index对应的是对象的属性名(key)
4. 循环嵌套 必须确保for-item和for-index 的值不同即可
*/
简单循环:
<view
wx:for="friends"
wx:for-item="item"
wx:key="*this"
wx:for-index="id" >
item: item, 索引: id</view>
</view>
循环对象
<view>
<view
wx:for="persion"
wx:for-item="value"
wx:key="*this"
wx:for-index="key" >
属性名: key, 属性值: value</view>
</view>
循环嵌套
<view>
<view
wx:key="*this"
wx:for="friends"
wx:for-item="item"
wx:for-index="id" >
<view wx:key="*this" wx:for="item.friends" wx:for-item="item1" wx:for-index="index1">
item1
</view>
</view>
</view>
以上是关于小程序`uin-app`之列表循环的主要内容,如果未能解决你的问题,请参考以下文章