微信小程序wx:for 的使用以及wx:key绑定

概述

• wx:for基本使用
• wx:for-item和wx:for-index重新命名item和index
• wx:key两种绑定方式以及注意事项

wx:for基本使用

业务层数据

Page({data:{name:'Leung',}})

视图层
wx:for遍历时候每一项名称为

item

每一项索引名称为

index

<view><blockwx:for="{{name}}"wx:key="item"><text>字符:{{item}}</text><text>索引:{{index}}</text></block></view>

wx:for-item和wx:for-index实现item和index重命名

wx:for-item="str"

将原来名称

item

修改成

str

wx:for-index="i

将原来索引名称

index

修改成

i

<view><blockwx:for="{{name}}"wx:key="str"wx:for-item="str"wx:for-index="i"><text>字符:{{str}}</text><text>索引:{{i}}</text></block></view>

wx:key绑定两种方式

方式一:

item

方式二:

*this

这个

*this

默认情况就是

item

wx:for渲染存储对象的数组使用时候如何绑定wx:key

业务层数据

Page({data:{books:[{id:'001',name:'你不知道的JavaScript'},{id:'002',name:'JavaScript高级程序设计'}]}})

视图层绑定数据

以下不要直接使用

wx:key="item"

或者

wx:key="*this"

因为此时循环遍历的每一项数据都是

键值对

的对象。

wx:key="{}"

解析变量之后转换字符串底层原理就是

({}).toString()

最终渲染成

[object Object]

无法实现优化。

wx:for="books"

遍历时候自动解析对象每一个属性,可以直接

wx:key="id"

<view><blockwx:for="{{books}}"wx:key="id"wx:for-item="book"><view>
      {{book.name}}
    </view></block></view>