WXML模板语法

1. 数据绑定

1.1 数据绑定的基本原则

1. 在data中定义数据
2. 在WXML中使用数据

1.2 在data中定义页面的数据

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

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

1.3 Mustache语法的格式

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

1.4 Mustache语法的应用场景

Mustache语法的主要应用场景如下：

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

1.5 动态绑定内容

页面数据如下：

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

页面结构图下：

<view>{{info}}<view>

1.6 动态绑定属性

页面数据如下：

Page({
data:{
imgSrc：'www.xxx.com/file/img'
}
})

页面结构图下：

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

1.7 三元运算

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

页面结构图下：

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

1.8 算术运算

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

页面结构图下：

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