概述
- wx:for基本使用
- wx:for-item和wx:for-index重新命名item和index
- wx: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修改成strwx: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高级程序设计'}
]
}
})
视图层绑定数据文章来源：https://www.toymoban.com/news/detail-506041.html
以下不要直接使用
wx:key="item"或者wx:key="*this"因为此时循环遍历的每一项数据都是键值对的对象。wx:key="{}"解析变量之后转换字符串底层原理就是({}).toString()最终渲染成[object Object]无法实现优化。wx:for="books"遍历时候自动解析对象每一个属性,可以直接wx:key="id"文章来源地址https://www.toymoban.com/news/detail-506041.html
<view>
<block wx:for="{{books}}" wx:key="id" wx:for-item="book">
<view>
{{book.name}}
</view>
</block>
</view>
到了这里，关于微信小程序wx:for 的使用以及wx:key绑定的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
