-
1、为什么会有数据绑定：
- 用户界面呈现会因时刻不同、数据发生变化而有所不同。或是因为用户操作发生了动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力，从而达到更好的用户体验。
- 在Web开发中，借助JavaScript并通过DOM接口，完成界面的动态更新；
- 在小程序中，使用WXML语言提供的数据绑定功能，完成界面的动态更新；
-
2、数据绑定语法：
- WXML 中的动态数据均来自对应 Page 的 data；
- 数据绑定使用 Mustache 语法（双大括号）将变量包起来。
{{ value }}
-
3、数据绑定基本用法：
3.1 内容绑定：
内容绑定是数据绑定的最基本用法，可以在标签内渲染动态的内容，需要在双引号之内。
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
3.2 组件属性绑定：
可以实现动态属性，借助动态属性，可以实现如下操作：
——动态样式；
——动态宽度；
——动态长度；
——.....
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3.3关键字：
需要在双引号之内：
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
——注意： 不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
3.4 运算：
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
- 三元运算：可以简化代码，减少代码量，提升代码的可读性。
<view hidden="{{flag ? true : false}}"> Hidden </view>
- 算数运算：标签内支持简单的加减乘除运算。
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
- 逻辑判断：
<view wx:if="{{length > 5}}"> </view>
- 字符串运算：标签内支持对字符串的操作。
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
- 数据路径运算： WXML支持对对象、数组的路径操作，读取其内部的数据。
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
3.5 组合：
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
- 数组：
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]。
- 对象： WXML可以在 Mustache内进行对象的组合。
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
最终组合成的对象是{for: 1, bar: 2}。
也可以用扩展运算符... 来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}。
——注意：
- 如果组合时，出现了相同的变量名，后面的变量会覆盖前面的变量；
- 花括号和引号之间如果有空格，空格最终将解析成为字符串。
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
