微信小程序中实现列表渲染（wx:for）_小程序使用v-for渲染数据库数据

我们经常在vue页面中用v-for语句来实现列表渲染，那在微信小程序wxml页面中也可以用类似于v-for作用的语句wx:for来实现列表的渲染，如下所示：
在wxml页面中：

 <view class="list_box listTwo">
        <view class="item" wx:for="{{listTwo}}" wx:key="label"> 
          <view class="icon_bg">
            <image src="{{item.src}}"></image>
          </view>
          <text>{{item.label}}</text>
        </view>
      </view>
1
2
3
4
5
6
7
8

在js文件中：

/**
   * 页面的初始数据
   */
  data: {
    listTwo: [
      {
        src: '../../static/img/jkjc.png',
        label: '最新体检报告'
      },
      {
        src: '../../static/img/new_zytz.png',
        label: '最新中医体质'
      },
      {
        src: '../../static/img/new_dzcf.png',
        label: '最新电子处方'
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19