1.简单数据绑定
     2.组件属性数据绑定
     3.运算绑定
         3.1三元运算符
         3.2算数运算
         3.3字符串拼接运算
         3.4逻辑判断运算

正文

    WXML全称：wexin markup language,微信标签语言，可以理解为web中的html，今天来讲一下数据绑定，通过几个小案例掌握基本的使用，以下均以index页面进行讲解。
    一般是在.js文件中进行数据设置，所有的数据均在page对象中的data属性中进行设置，key-value形式进行设置，其中value可以是字符串、对象、集合。wxml中进行数据展示，其中使用{{}}差值表达式进行获取数据信息。
    

Page({data: {keyInfo: 'hello uni-app!'}
})

index.wxml中获取数据信息：

{{keyInfo}}

微信开发者工具中保存之后左侧模拟器中显示如下：

另外也支持对象.属性或是集合指定元素取值。示例如下:
index.js中：

Page({data: {student:{name:'jack'},toy:[12,14,15]}
})

index.wxml中：

学生姓名：{{student.name}},拥有玩具的个数为：{{toy[1]}}

展示如下：

Page({data: {imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF'}
})

index.wxml中设置图片组件的路径属性:

{imgUrl}}" >

展示内容如下：

    

index.js中:
Page({data: {imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',randNum: Math.random() * 10}
})

index.wxml中：

{imgUrl}}" >
随机数：{{randNum}}，{{randNum > 5 ? '大于5' : '小于5'}}

注意:{{}}中的文字部分内容需要是字符串
展示内容如下：

    

Page({data: {randNum: Math.random()* 10}
})

index.wxml中:

随机数：{{randNum}},加3之后：{{randNum+3}}

展示内容如下:

    

Page({data: {msg: 'world'}
})

index.wxml:

{{'hello '+msg}}

展示内容如下：

    

Page({data: {showMsg: false}
})

index.wxml中:

{showMsg}}">showMsg为true时显示
{!showMsg}}">showMsg为false时显示

展示内容如下：