系列文章:
微信小程式 教程之wxss
微信小程式 教程之引用
微信小程式 教程之事件
微信小程式 教程之模板
微信小程式 教程之列表渲染
微信小程式 教程之條件渲染
微信小程式 教程之資料繫結
微信小程式 教程之wxml
資料繫結
wxml中的動態資料均來自對應page的data。
簡單繫結
資料繫結使用"mustache"語法(雙大括號)將變數包起來,可以作用於:
內容} page(
})元件屬性(需要在雙引號之內)
page(
})控制屬性(需要在雙引號之內)
page(
})運算
可以在}內進行簡單的運算,支援的有如下幾種方式:
三元運算
hidden
算數運算
}程式設計客棧 + } + d
page(
})view中的內容為3 + 3 + d
邏輯判斷
5}}">
字串運算
}page(
})組合
也可以在mustache內直接進行組合,構成新的物件或者陣列
陣列&tkqphuslt;view wx:for-items="}"> }
page(
})最終組合成陣列[0, 1, 2, 3, 4]
物件page(
})最終組合成的物件是
也可以用擴充套件運算子...來將乙個物件展開
page(,
obj2:
}})最終組合成的物件是
如果物件的key和value相同,也可以間接地表達
page(
})最終組合成的物件是
注意:上述方式可以隨意組合,但是如有存在變數名相同的情況,後邊的會覆蓋前面,如
page(,
obj2: ,
a: 5
}})最終組合成的物件是
本文標題: 微信小程式 教程之資料繫結
本文位址:
微信小程式 教程之條件渲染
系列文章 微信小程式 教程之wxss 微信小程式 教程之引用 微信小程式 教程之事件 微信小程式 教程之模板 微信小程式 教程之列表渲染 微信小程式 教程之條件渲染 微信小程式 教程之資料繫結 微信小程式 教程之wxml wx if 在mina中,我們用wx if 來判斷是否需要渲染該 塊 true...
微信小程式 雙向資料繫結
舉個例子class weui cell weui cell input class weui cell hd class weui label space ensp 接 待 人text view view class weui cell bd class weui input name manage...
微信小程式之資料繫結
紅色盒子 淺藍盒子 綠色盒子 這個綠色盒子裡又可以切分成兩個盒子 白色字型較大乙個盒子,白色字型較小乙個盒子 藍色盒子 資料先靜態,後動態 簡單的說就是剛開始,你可以直接先往頁面裡塞靜態資料,然後除錯樣式,樣式搞定了,就可以把靜態資料換成動態資料了。換動態資料呢,又可以分為兩步,大神都是一步到位的,...