-
1、為什么會有數(shù)據(jù)綁定：
- 用戶界面呈現(xiàn)會因時刻不同、數(shù)據(jù)發(fā)生變化而有所不同。或是因為用戶操作發(fā)生了動態(tài)改變，這就要求程序的運(yùn)行過程中，要有動態(tài)的去改變渲染界面的能力，從而達(dá)到更好的用戶體驗。
- 在Web開發(fā)中，借助JavaScript并通過DOM接口，完成界面的動態(tài)更新；
- 在小程序中，使用WXML語言提供的數(shù)據(jù)綁定功能，完成界面的動態(tài)更新；
-
2、數(shù)據(jù)綁定語法：
- WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data；
- 數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來。
{{ value }}
-
3、數(shù)據(jù)綁定基本用法：
3.1 內(nèi)容綁定：
內(nèi)容綁定是數(shù)據(jù)綁定的最基本用法，可以在標(biāo)簽內(nèi)渲染動態(tài)的內(nèi)容，需要在雙引號之內(nèi)。
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
3.2 組件屬性綁定：
可以實現(xiàn)動態(tài)屬性，借助動態(tài)屬性，可以實現(xiàn)如下操作：
——動態(tài)樣式；
——動態(tài)寬度；
——動態(tài)長度；
——.....
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3.3關(guān)鍵字：
需要在雙引號之內(nèi)：
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
——注意： 不要直接寫 checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成 boolean 類型后代表真值。
3.4 運(yùn)算：
可以在 {{}} 內(nèi)進(jìn)行簡單的運(yùn)算，支持的有如下幾種方式：
- 三元運(yùn)算：可以簡化代碼，減少代碼量，提升代碼的可讀性。
<view hidden="{{flag ? true : false}}"> Hidden </view>
- 算數(shù)運(yùn)算：標(biāo)簽內(nèi)支持簡單的加減乘除運(yùn)算。
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
- 邏輯判斷：
<view wx:if="{{length > 5}}"> </view>
- 字符串運(yùn)算：標(biāo)簽內(nèi)支持對字符串的操作。
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
- 數(shù)據(jù)路徑運(yùn)算： WXML支持對對象、數(shù)組的路徑操作，讀取其內(nèi)部的數(shù)據(jù)。
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
3.5 組合：
也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對象或者數(shù)組。
- 數(shù)組：
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
最終組合成數(shù)組[0, 1, 2, 3, 4]。
- 對象： WXML可以在 Mustache內(nèi)進(jìn)行對象的組合。
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
最終組合成的對象是{for: 1, bar: 2}。
也可以用擴(kuò)展運(yùn)算符... 來將一個對象展開
<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}。
——注意：
- 如果組合時，出現(xiàn)了相同的變量名，后面的變量會覆蓋前面的變量；
- 花括號和引號之間如果有空格，空格最終將解析成為字符串。
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
