WXML 中的動態數據均來自對應 Page 的 data。微信小程序中的數據綁定分為簡單綁定、運算和組合。
一、簡單綁定
數據綁定使用 Mustache 語法（雙大括號）將變量包起來。
1、內容
實例：
<view>
<view>{{message}}/<view>
/<view>
js代碼：
//index.js
const app = getApp()
Page({
data:{
message:'hello world!'
}
})
2、組件屬性(需要在雙引號之內)
實例：
<view>
<view>{{message}}/<view>
/<view>
js代碼：
//index.js
const app = getApp()
Page({
data:{
message:'hello world!',
index:1
}
})
效果：
3、控制屬性(需要在雙引號之內)
實例：
<view>
<view>index/<view>
/<view>
js代碼：
//index.js
Page({
data:{
status:true
}
})
效果：
4、關鍵字(需要在雙引號之內)
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
實例：
<view>
<checkbox>測試/<checkbox>
/<view>
效果：
特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後代表真值。
二、運算
可以在 {{}} 內進行簡單的運算。
1、三元運算
<checkbox>測試/<checkbox>
2、算數運算
實例：
<view>x + y = {{x+y}}/<view>
js代碼：
Page({
data:{
x:0,
y:2
}
})
結果為：
3、邏輯判斷
實例：
<view>x + y/<view>
js代碼：
Page({
data:{
index:3
}
})
結果為：
4、字符串運算
實例：
<view>{{"Hello "+name}}/<view>
js代碼:
Page({
data:{
name:'xige'
}
})
效果為：
5、數據路徑運算
實例：
<view>{{obj.key}} {{arr[0]}}/<view>
js代碼：
Page({
data:{
obj:{
key:'hello'
},
arr:['xige']
}
})
效果為：
三、組合
也可以在 Mustache 內直接進行組合，構成新的對象或者數組。
1、數組
實例：
<view> {{item}} /<view>
js代碼：
Page({
data:{
index:0
}
})
效果為：
2、對象
注意： 花括號和引號之間如果有空格，將最終被解析成為字符串
分享到:
閱讀更多 程序猿肸哥 的文章
