# 数据绑定

WXML 中允许使用数据绑定，将动态数据嵌入到静态模板中。

# 基本示例

数据绑定采用 {{ ... }} 的形式嵌入到静态模板内部。

<!-- page.wxml -->
<view>
  {{ message }} <!-- 接收视图层中的 message 数据字段 -->
</view>

// page.js
Page({
  data: {
    message: 'hello world'
  }
})

数据绑定只能用于文本内容或属性值。

<!-- 文本内容位置的数据绑定 -->
<view>{{ message }}</view>

<!-- 属性值位置的数据绑定 -->
<view hidden="{{ hidden }}">
  这段文本由 hidden 字段控制显示或隐藏
</view>

仅适用于 glass-easel 组件框架

在用于属性值时，可以去掉周围的引号：

<view hidden={{ hidden }}>
  这段文本由 hidden 字段控制显示或隐藏
</view>

在数据绑定的 {{ ... }} 内，可以放入 JavaScript 表达式。

<view>{{ message + ' from WXML' }}</view>

并不是所有表达式运算符都使用，支持的运算符请参考表达式文档。

在同一个位置上，静态内容可以和数据绑定混合。

<view>{{ message }} from WXML</view>
<!-- 等价于 -->
<view>{{ message + ' from WXML' }}</view>

请留意，如果表达式周围有空白符，也会被混合入表达式中！（这同样意味着表达式结果必定为字符串。）

<view>
  {{ message }}
</view>
<!-- 等价于 -->
<view>{{ '\n  ' + message + '\n' }}</view>

这个可能并不是想要的结果。如果不想要这些空白符，可以考虑改成：

<view>{{ message }}</view>
<!-- 或者 -->
<view>{{
  message
}}</view>