正文
WXML全称：wexin markup language,微信标签语言，可以理解为web中的html，今天来讲一下数据绑定，通过几个小案例掌握基本的使用，以下均以index页面进行讲解。
一般是在.js文件中进行数据设置，所有的数据均在page对象中的data属性中进行设置，key-value形式进行设置，其中value可以是字符串、对象、集合。wxml中进行数据展示，其中使用{{}}差值表达式进行获取数据信息。
1.简单数据绑定
index.js中设置数据信息：
Page({ data: { keyInfo: 'hello uni-app!' } })
index.wxml中获取数据信息：
<view>{{keyInfo}}</view>
微信开发者工具中保存之后左侧模拟器中显示如下：
另外也支持对象.属性或是集合指定元素取值。示例如下:
index.js中：
Page({ data: { student:{ name:'jack' }, toy:[12,14,15] } })
index.wxml中：
<view>学生姓名：{{student.name}},拥有玩具的个数为：{{toy[1]}}</view>
展示如下：
2.组件属性数据绑定
注意组件属性中获取值时需要使用双引号，以给图片设置图片地址为例说明: index.js中设置图片路径：
Page({ data: { imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF' } })
index.wxml中设置图片组件的路径属性:
<image src="{{imgUrl}}" ></image>
展示内容如下：
3.运算绑定
运算时均在{{}}中进行，常见的运算有下面几种：
3.1三元运算符
可以直接在{{}}中进行三元运算。举例说明：
判断随机数大于5还是小于5
index.js中: Page({ data: { imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF', randNum: Math.random() * 10 } })
index.wxml中：
<image src="{{imgUrl}}" ></image> <view>随机数：{{randNum}}，{{randNum > 5 ? '大于5' : '小于5'}}</view>
注意:{{}}中的文字部分内容需要是字符串
展示内容如下：
3.2算数运算
data中定义的数据需要从{{}}中进行运算
初始化两位小数的随机数，页面上进行加法运算。
index.js中:
Page({ data: { randNum: Math.random()* 10 } })
index.wxml中:
<view>随机数：{{randNum}},加3之后：{{randNum+3}}</view>
展示内容如下:
3.3字符串拼接运算
和算数运算符相同，需要从{{}}中进行拼接，注意字符串需要使用单引号。
index.js： Page({ data: { msg: 'world' } })
index.wxml:
<view>{{'hello '+msg}}</view>
展示内容如下：
3.4逻辑判断运算
根据showMsg状态进行动态显示
index.js中:
Page({ data: { showMsg: false } })
index.wxml中:
<view wx:if="{{showMsg}}">showMsg为true时显示</view> <view wx:if="{{!showMsg}}">showMsg为false时显示</view>
展示内容如下：
