这么火的微信小程序！小白日常学习系列 数据绑定＋渲染，附图解，赶紧收藏学习吧！

数据绑定

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

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

{{ message }}

Page({

data: {

message: 'Hello MINA!'

}

})

输出为

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

Page({

data: {

id: 0

}

})

console输出为

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

Page({

data: {

condition: true

}

})

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

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

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

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

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

Hidden

算数运算

{} + {} + d

Page({

data: {

a: 1,

b: 2,

c: 3

}

})

view中的内容为 3 + 3 + d。

逻辑判断

字符串运算

{{"hello" + name}}

Page({

data:{

name: ' MINA'

}

})

输出为

数据路径运算

{} {}

Page({

data: {

object: {

key: 'Hello '

},

array: ['MINA']

}

})

输出为

组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

数组

Page({

data: {

zero: 0

}

})

最终组合成数组[0, 1, 2, 3, 4]。

对象

Page({

data: {

a: 1,

b: 2

}

})

最终组合成的对象是

也可以用扩展运算符 ... 来将一个对象展开

Page({

data: {

obj1: {

a: 1,

b: 2

},

obj2: {

c: 3,

d: 4

}

}

})

最终组合成的对象是 。

如果对象的 key 和 value 相同，也可以间接地表达。

Page({

data: {

foo: 'my-foo',

bar: 'my-bar'

}

})

最终组合成的对象是 。

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

Page({

data: {

obj1: {

a: 1,

b: 2

},

obj2: {

b: 3,

c: 4

},

a: 5

}

})

最终组合成的对象是 。

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

{}

等同于

{}

列表渲染

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

{}: {}

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

{}: {}

输出为

{} * {} = {}

输出为

后边还有一串。。。。。截图省略了

{}:

{}

输出为

{}:

{}

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

示例代码：

Switch

Add to the front

Add to the front

Page({

data: {

objectArray: [

numberArray: [1, 2, 3, 4]

},

switch: function(e) {

for (let i = 0; i

const x = Math.floor(Math.random() * length)

const y = Math.floor(Math.random() * length)

}

this.setData({

})

},

addToFront: function(e) {

this.setData({

})

},

addNumberToFront: function(e){

this.setData({

})

}

})

输出为

每个Add to the front点击两次变化为

点击switch变化为

注意：

{}

等同于

{}

条件渲染

wx:if

在框架中，使用 wx:if="{}" 来判断是否需要渲染该代码块：

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

view1

view2

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

输出结果

condition:false 不输出

condition:true 输出

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。