微信小程序自学第四课：数据绑定

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

一、简单绑定

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

1、内容

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2、组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

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

<view wx:if="{{condition}}"> </view>

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

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

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

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

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

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

二、运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

1、三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2、算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
view中的内容为 3 + 3 + d。

3、逻辑判断

<view wx:if="{{length > 5}}"> </view>

4、字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

5、数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})三、组合

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

1、数组

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

最终组合成数组[0, 1, 2, 3, 4]。