微信小程式 教程之資料繫結

2022-10-08 12:33:13 字數 1031 閱讀 8564

系列文章:

微信小程式 教程之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...

微信小程式之資料繫結

紅色盒子 淺藍盒子 綠色盒子 這個綠色盒子裡又可以切分成兩個盒子 白色字型較大乙個盒子,白色字型較小乙個盒子 藍色盒子 資料先靜態,後動態 簡單的說就是剛開始,你可以直接先往頁面裡塞靜態資料,然後除錯樣式,樣式搞定了,就可以把靜態資料換成動態資料了。換動態資料呢,又可以分為兩步,大神都是一步到位的,...