1. 列表渲染的基础用法
<!--渲染数组列表-->
<view wx:for="{{numList}}" wx:key="*this" > 序号:{{index}} - 元素:{{item}}</view>
<!--渲染对象属性-->
<view wx:for="{{userInfo}}" wx:key="*this"> 序号:{{index}} - 元素:{{item}}</view><view wx:for="{{fruitList}}" wx:key="id" > 序号:{{index}} - 元素:{{item.name}}</view>
// pages/test/test.js
Page({data: {numList:[1,2,3],fruitList:[{id:1,name:'苹果'},{id:2,name:'柠檬'},{id:3,name:'香蕉'},],userInfo:{name: 'xiaoming',age:21}},
})
2. 列表渲染的进阶使用
<!--渲染对象属性-->
<view wx:for="{{userInfo}}" wx:key="index" wx:for-item="value" wx:for-index="key" >
序号:{{key}} - 元素:{{value}}
</view><view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruit" wx:for-index="i">
序号:{{i}} - 元素:{{fruit.name}}
</view>
<view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruit" wx:for-index="i">
<view>{{fruit.name}}</view>
</view>
<block wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruit" wx:for-index="i">
<view>{{fruit.name}}</view>
</block>