微信小程序开发之WXML：数据绑定

WXML语言最终会被转译为宿主端对应的语言，所以WXML语言中使用的标签一定是小程序定义的标签，不能使用自定义的标签，这样才能保持页面的正确转译。（这是对上一篇标签的补充）
WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。

数据绑定

数据绑定功能使得程序在运行过程中，具备动态改变渲染界面的能力，从而达到更好的用户体验效果。小程序的数据绑定使用Mustache语法（双大括号）将变量或简单的的运算规则包起来。

简单绑定

WXML中的动态数据均来自对应Page的data。简单数据绑定是指我们使用Mustache语法（双大括号）将变量包起来。在模板中直接作为字符串输出使用，可作用于内容、组件属性、控制属性、关键字等输出，其中关键字输出是指将JavaScript中的关键字按其真值输出。

{{content}}

需要在双引号之内

//page.js
Page({
data:{
     id:0
      }
      })

需要在双引号之内

//page.js
Page({
data:{
     condition:true
      }
      })

需要在双引号之内

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

注意：不要直接写checked=“false”，其计算结果是一个字符串，转成Boolean类型后则代表真值。

运算

可以在{{}}内做一些简单的运算，支持的运算有三元运算、算数运算、逻辑判断、字符串运算、数据路径运算，这些均符合JavaScript运算规则。示例如下：
三元运算：

算数运算

{{a+b}}+{{c}}+d
//page.js
Page({
data:{
a:1,
b:1,
c:1}
})

view中的内容为“3+3+d”。
逻辑判断：

字符串运算：

{{"hello"+name}}
//page.js
Page({
data:{
name:'MINA'
}
}）

数据路径运算：

{{object.key}}{{array[0]}}
//page.js
Page({
data:{
object:{
key:'Hello'
},
array:['MINA']
}
})

组合

data中的数据可以在模板再次组成新的数据结构，这种组合常常在数组或对象中使用。可分为：

数组组合比较简单，可以将其值直接放在数组某个下标下：

{{[myValue,2,3,'stringtype']}}
//page.js
Page({
data:{
myValue:0}
})

最终页面组合的对象为[0,2.3,‘stringtype’]。
对象组合有三种组合方式（微信官方文档.小程序.数据绑定）
直接将数据作为value值进行组合。



注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

最终组合成的对象是 {a: 5, b: 3, c: 6}。
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

  {{item}}

等同于


  {{item}}