-
1蜕煌、為什么會有數(shù)據(jù)綁定：
- 用戶界面呈現(xiàn)會因時刻不同、數(shù)據(jù)發(fā)生變化而有所不同诬留⌒奔停或是因為用戶操作發(fā)生了動態(tài)改變贫母，這就要求程序的運行過程中，要有動態(tài)的去改變渲染界面的能力盒刚，從而達到更好的用戶體驗腺劣。
- 在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ù)綁定的最基本用法耻警，可以在標簽內(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 運算：
可以在 {{}} 內(nèi)進行簡單的運算装处，支持的有如下幾種方式：
- 三元運算：可以簡化代碼误债，減少代碼量，提升代碼的可讀性妄迁。
<view hidden="{{flag ? true : false}}"> Hidden </view>
- 算數(shù)運算：標簽內(nèi)支持簡單的加減乘除運算找前。
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
- 邏輯判斷：
<view wx:if="{{length > 5}}"> </view>
- 字符串運算：標簽內(nèi)支持對字符串的操作。
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
- 數(shù)據(jù)路徑運算： WXML支持對對象判族、數(shù)組的路徑操作躺盛，讀取其內(nèi)部的數(shù)據(jù)。
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
3.5 組合：
也可以在 Mustache 內(nèi)直接進行組合形帮，構(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)進行對象的組合。
<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}仿耽。
——注意：
- 如果組合時，出現(xiàn)了相同的變量名各薇，后面的變量會覆蓋前面的變量项贺；
- 花括號和引號之間如果有空格，空格最終將解析成為字符串峭判。
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
