微信小程序开发中的数据绑定

在微信小程序开发中，wxml中经常需要使用到数据绑定。该文档基本上照搬微信小程序官方文档。

---

微信官方文档中规定：WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法（双大括号）将变量包起来。常用于如下几个方面：内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)、运算、三元运算、算数运算、逻辑判断、字符串运算、数据路径运算、组合、数组和对象。

1）内容

 {{ message }} 

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2）组件属性(需要在双引号之内)

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

3）控制属性(需要在双引号之内)

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

4）关键字(需要在双引号之内)

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

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

 

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

5）运算有5种类型（三元运算、算数运算、逻辑判断、字符串运算、数据路径运算、）

5.1）三元运算

 注意：先是“?”号，然后是冒号“:”，不是“;”。

5.2）算数运算

 {{a + b}} + {{c}} + d 

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

运算结果是：3+3+d

5.3）逻辑判断

5.4）字符串运算

{{"hello" + name}}

Page({
  data: {
    name: 'MINA'
  }
})

5.5）数据路径运算

{{object.key}} {{array[0]}}

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

 显示的结果是：HelloMINA

6）组合主要有两种类型（组合成数字和组合成对象）

6.1）组合后变成数组

 {{item}} 

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

 6.2）组合后变成对象

这应该是微信小程序中数据绑定比较复杂的知识点了。

最基础的方式：

Page({
  data: {
    a: 1,
    b: 2
  }
})

 最终组合后的对象（Key-Value键值对的形式）：{for:a,bar:b}

当然，假如参数很多的时候，也可以使用运算符“...”来组合。

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

 最终组合后的对象是：{a:1,b:2,c:3,d:4,e:5}

假如key和value的值是一样的时候，也可以：

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合后的对象是：{foo:'my-foo',bar:'my-bar'}

注意，以上的方式当key相同时，value值会出现覆盖的情况。

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

  最终组合后的对象是：{a:5,b:3,c:6}

最后需要注意的一点，当花括号和引号之间如果有空格，将最终被解析成为字符串。

 {{item}} 

等同于：

 {{item}}