第三节：小程序之数据绑定，数据还可以这样玩。

上一节讲到了如何简单快速创建小程序hellow world，相信大家还没忘记吧，不怕，就算忘记了，回来看看，立马又能记住。这节来讲讲小程序用什么语法来进行数据绑定的。

数据绑定有它专门的语法，叫做Mustache 语法（双大括号）将变量包起来，例如：{{myData}}。你可以不细究这个语法的意思，但你知道数据绑定通过这个语法来展示就可以了。

WXML的动态数据，均来自对应的Page的data

wxml：

<view> {{ message }} </view>

js：

Page({
  data: {
    message: "趣味前端"
  }
})

以上就是简单的数据绑定,data的message就能绑定到wxml的{{message}}中了。

别想多了，数据绑定就是这么简单，往下看

我们再来看看其他形式的绑定：

组件属性

<view id="item-{{id}}"> </view>	

Page({
  data: {
    id: 0
  }
})

控制属性

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

关键字

true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 3,
    b: 4,
    c: 5
  }
})

view中的内容为7+5+d

逻辑判断

<view wx:if="{{length > 3}}"> </view>

字符串运算

<view>{{"你好" + name}}</view>

Page({
  data:{
    name: 'Mr.Zhang'
  }
})

以上举例了各种形式的数据绑定的例子，记住一点，数据都是在data中，对应的变量可以显示在wxml各种各样的地方。

只要data中的数据值改变了，wxml中的内容也会相应改变。这就是数据驱动视图的方便之处，不用刷新，数据的轻轻松松的改变了。

不难，一点都不难。大家给我一个傲娇的眼神。

下一节可能讲的多点，主要是最常用的语法。跟着学，就够你用的了。

我是Mr.Zhang，更多前端教程和资讯，关注公众号，趣味前端，我们一起交流学习。