# 数据绑定

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

## 基本示例

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

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

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

## 数据绑定位置

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

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

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

## 属性值位置的数据绑定简写

> 仅适用于 glass-easel 组件框架

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

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

## 数据绑定表达式

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

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

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

## 静态内容与数据绑定同时使用

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

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

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

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

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

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