小程序原生-列表渲染

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>

原文地址：https://blog.csdn.net/wu2374633583/article/details/142656833

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！