使用微信小程序数据绑定让“变量替换”更加简单

微信小程序提供了数据绑定功能，可以轻松实现前端模板的“变量替换”，从而实时更新页面。下面介绍数据绑定的用法：

1. 简单绑定

在WXML文件中使用双大括号将变量包起来即可实现数据绑定。例如：

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

需要在Page对象的data属性中定义该变量。例如：

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

2. 组件属性需要在双引号之内

组件属性同样可以进行数据绑定。需要将属性值放到双引号之内，并使用大括号将变量包起来。例如：

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

需要在Page对象的data属性中定义该变量。例如：

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

3. 控制属性需要在双引号之内

控制属性同样可以进行数据绑定。需要将属性值放到双引号之内，并使用大括号将变量包起来。例如：

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

需要在Page对象的data属性中定义该变量。例如：

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

4. 运算

在双大括号中，可以进行简单的运算操作。支持的运算符有：三元运算、算数运算、逻辑判断、字符串拼接等。

4.1 三元运算

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

4.2 算数运算

<view> {{a + b}} + {{c}} + d </view>

需要在Page对象的data属性中定义这些变量。例如：

Page({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 'some string'
  }
})

则上述组件将会显示文本“3 + 3 + some string”。

4.3 逻辑判断

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

需要在Page对象的data属性中定义该变量。例如：

Page({
  data: {
    length: 10
  }
})

则上述组件将会显示。

4.4 字符串拼接

<view>{{"hello" + name}}</view>

需要在Page对象的data属性中定义该变量。例如：

Page({
  data:{
    name:"MINA"
  }
})