用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。
先看一个简单的例子。
将 pages/wxml/index.wxml 文件的内容做一些简单的修改，如代码2-5所示。
代码清单2-5 数据绑定示例
<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>
保存后工具刷新，模拟器并没有显示出当前的时间，这是因为我们并没有给 time 设置任何初始值，请打开 pages/wxml/index.js 文件，在 data 的大括号中加入：time: (new Date()).toString()。
如代码2-6所示。
代码清单2-6 数据绑定示例
// pages/wxml/index.js
Page({
/**
* 页面的初始数据
*/
data: {
time: (new Date()).toString()
},
})
保存，模拟器刷新后正确的展示了当前时间，并且每次编译时间都会被更新。
WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。
后文中为了保持简单，通过以下格式来展示上述的代码逻辑，使用第一段注释来表明 WXML 对应的脚本文件中的 data 结构。
代码清单2-7 展示格式
<!--
{
time: (new Date()).toString()
}
-->
<text>当前时间：{{time}}</text>
属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下：
代码清单2-8 属性值的绑定
<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>
<!-- 错误的写法 -->
<text data-test={{test}}> hello world </text >
需要注意的是变量名是大小写敏感的，也就是说 {{name}} 和 {{Name}} 是两个不同的变量。
代码清单2-9 绑定的变量大小写敏感
<!--
{
w: 'w',
W: 'W'
}
-->
<view>{{w}}</view>
<view>{{W}}</view>
<!-- 输出
w
W
-->
还需要注意，没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中，如代码2-10所示。
代码清单2-10 undefined值不会被输出到 wxml 中
<!--
{
var2: undefined,
var3: null,
var4: "var4"
}
-->
<view>{{var1}}</view>
<view>{{var2}}</view>
<view>{{var3}}</view>
<view>{{var4}}</view>
<!--
输出：
null
var4
-->
关于数据绑定的概念在第三章中有更为详细的介绍。
网站建设开发|APP设计开发|小程序建设开发