概述
wx:for基本使用wx:for-item和wx:for-index重新命名item和indexwx:key两种绑定方式以及注意事项wx:for基本使用
业务层数据
Page({data: {name: 'Leung',}})
视图层
wx:for遍历时候每一项名称为item每一项索引名称为index
<view><block wx: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><block wx: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><block wx:for="{{books}}" wx:key="id" wx:for-item="book"><view>{{book.name}}</view></block></view>
