微信小程序学习（三）——wx:for的使用

微信小程序学习（三）——wx:for的使用

本文主要介绍值得绑定以及如何在界面中显示重复元素。

本文主要参考：https://www.w3cschool.cn/weixinapp/weixinapp-list.html

好，下面上货。
1、首先新建一个页面，在页面中添加如下内容：

<view class="container">
<view wx:for="{{array}}" wx:key="index">
{{index}}:{{item}}
</view>
<view>========================</view>
<view wx:for="{{array2}}" wx:key="index">
{{index}}:{{item.message}}
</view>
<view>========================</view>
<view wx:for="{{array2}}" wx:for-index="idx" wx:for-item="itemName" wx:key="index">
{{idx}}: {{itemName.message}}
</view>
<view>========================</view>
<!--能够重复的显示block中的内容  -->
<block wx:for="{{array2}}" wx:key="index">
<view>this is test</view>
<view>{{index}}:{{item.message}}</view>
</block>
</view>

2、修改其对应的js文件

Page({
data: {
memo:"123",
array: [],
array2:[],
},
onLoad:function(){
var tmparr = [1,2,3,4,5];
var tmparr2 = [{message:"aa"},{message:"bb"}];
this.setData({
array:tmparr,
array2:tmparr2,
})
},
getremotedata:function(e){
console.log("getremotedata");
}
})

3、启动页面，查看页面内容：