1 数据绑定的基本原则
- 在 data 中定义数据
- 在 WXML 中使用数据
2 在 data 中定义页面的数据
在页面对应的 .js 文件中，把数据定义到 data 对象中即可：
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { // 页面的数据 info: '页面的数据' } })
3 Mustache 语法的格式（插值表达式）
把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：
<!--pages/list/list.wxml--> <view>{{ info }}</view>
3.1 Mustache 语法的应用场景
Mustache 语法的主要应用场景如下：
绑定内容
绑定属性
运算（三元运算、算术运算等）
3.2 动态绑定内容
页面的数据如下：
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info: 'init data' } })
页面的结构如下：
<!--pages/list/list.wxml--> <view>{{ info }}</view>
3.3 动态绑定属性
页面的数据如下：
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info: 'init data', imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' } })
页面的结构如下：
<!--pages/list/list.wxml--> <view>{{ info }}</view> <image src="{{imgSrc}}"></image>
3.4 三元运算
页面的数据如下：
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info: 'init data', imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2', // 生成10以内的随机数 randNum: Math.random()*10 } })
页面的结构如下：
<!--pages/list/list.wxml--> <view>{{ info }}</view> <image src="{{imgSrc}}"></image> <view>{{ randNum>=5 ? '随机数大于等于5' : '随机数小于5' }}</view>
3.5 算数运算
页面的数据如下：
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info: 'init data', imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2', // 生成10以内的随机数 randNum: Math.random()*10 } })
页面的结构如下：
<!--pages/list/list.wxml--> <view>{{ info }}</view> <image src="{{imgSrc}}"></image> <view>{{ randNum }}</view> <view>{{ randNum>=5 ? '随机数大于等于5' : '随机数小于5' }}</view> <view>{{ randNum * 10 }}</view>
