微信小程序8——列表渲染

1.wx:for
通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下:

 <view wx:for="{{arr1}}">
  索引：{{index}}，项目：{{item}}
  </view>
  arr1:['华为','小米','OPPO']   //放在data里面

默认情况下，当前循环项的索引用index表示;当前循环项用item表示。

使用wx:for-index可以指定当前循环项的索引的变量名。
使用wx:for-item可以指定当前项的变量名 

实例代码：

  <view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="Name">
  索引：{{idx}}，项目：{{Name}}
  </view>

2.wx:key的使用
类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率，示例代码如下:

//data数据
 arr2:[
      {id: 1,name:'华为' },
      {id: 2,name:'小米' },
      {id: 3,name:'OPPO' }
    ]
//wxml结构
<view wx:for="{{arr2}}" wx:key="id"> {{item.name}} </view>