数据绑定与列表渲染

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello World!'
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}">condition控制内容部分</view>

如果 condition为true则该view部分内容显示，否则，该部分内容不显示。

Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

true或false必须写在{{}}中间。

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

数组

<view wx:for="{{[0, 1, 2, 3, 4]}}"> {{item}} </view>

使用默认下标和数组名：

  <view wx:for="{{array}}">
  {{index}}:{{item.message}}
  {{index}}:{{item.title}}
  </view>

Page({
  data: {
    array:[{
      message:"微信小程序",
      title:"微信"
    },
      {
        message: "腾讯专供",
        title: "腾讯"
      }
    ]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

  <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}:{{itemName.message}}
  {{idx}}:{{itemName.title}}
  </view>

Page({
  data: {
    array:[{
      message:"微信小程序",
      title:"微信"
    },
      {
        message: "腾讯专供",
        title: "腾讯"
      }
    ]
  }
})

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>