WXML 模板语法①数据绑定-微信小程序开发（七）

数据绑定

1. 数据绑定的基本原则

① 在 data 中定义数据
② 在 WXML 中使用数据

2. 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

Page({
  data:{
     //字符串类型的数据
     info:'init data',
     //数组类型的数据
     msgList:[{msg:'hello'},{msg:'world'}]
   }
 })

3. Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：

<view>{{ 要绑定的数据名称 }}</view>

4. Mustache 语法的应用场景

Mustache 语法的主要应用场景如下：
⚫ 绑定内容
⚫ 绑定属性
⚫ 运算（三元运算、算术运算等）

5. 动态绑定内容

页面的数据如下：

Page({
   data:{
    info:'init data',
  }
})

页面的结构如下：

<view>{{ info }}</view>

6. 动态绑定属性

页面的数据如下：

Page({
   data:{
    imgSrc:'https://pic.cnblogs.com/avatar/1222453/20170819093927.png',
  }
})

页面的结构如下：

<image src="{{ imgSrc }}"></image>

7. 三元运算

页面的数据如下：

Page({
   data:{
    randomNum: Math.random( )*10 //生成10以内的随机数
  }
})

页面的结构如下：

<view>{{ randomNum >=5 ? '随机数字大于或等于5' : '随机数字小于5' }}</view>

8. 算数运算

页面的数据如下：

Page({
   data:{
    randomNum: Math.random( ).toFixed(2)   //生成一个带两位小数的随机数，例如 0.12
  }
})

页面的结构如下：

<view>生成100以内的随机数：{{ randomNum * 100 }}</view>