您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序中數(shù)據(jù)綁定怎么實現(xiàn),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
1、微信小程序無法從js頁面中綁定wxml頁面中的標簽,以此來獲得或者設置標簽的值或者屬性,全部都是用數(shù)據(jù)綁定的方式來實現(xiàn)
2、WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page 的 data。
數(shù)據(jù)綁定:
1、簡單的數(shù)據(jù)綁定
wxml中應用雙大括號將data中的數(shù)據(jù)綁定到相應的標簽中: <view> {{ message }} </view> js中: Page({ data: { message: 'Hello MINA!' } })
2、標簽屬性的綁定
wxml中,其中綁定的要在雙引號之中: <view id="{{id}}"> </view> js中: Page({ data: { id: 0 } })
3、控制屬性的綁定
wxml中(綁定在雙引號中) <view wx:if="{{condition}}"> </view> //作為條件句出現(xiàn),可以動態(tài)決定某一個標簽出現(xiàn)不出現(xiàn) js中: Page({ data: { condition: true } }) ---或--- wxml中(綁定在雙引號中) <view hidden="{{condition}}"> </view> //作為條件句出現(xiàn),可以動態(tài)決定某一個標簽出現(xiàn)不出現(xiàn) js中: Page({ data: { condition: true } }) //hidden與wx:if的區(qū)別: hidden只是隱藏,但是節(jié)點是生成的 wx:if不生成節(jié)點
4、關鍵字(需要在雙引號之內(nèi))
true:boolean 類型的 true,代表真值。 false: boolean 類型的 false,代表假值。 <checkbox checked="{{false}}"> </checkbox> 特別注意:不要直接寫 checked="false",其計算結果是一個字符串,轉成 boolean 類型后代表真值。 //在新版的微信小程序開發(fā)工具中,這個問題好像被解決了,即checked="true"也是對的
5、運算
1>三元運算 <view hidden="{{flag ? true : false}}"> Hidden </view> 2>算數(shù)運算 <view> {{a + b}} + {{c}} + d </view> Page({ data: { a: 1, b: 2, c: 3 } }) view中的內(nèi)容為 3 + 3 + d。 3>邏輯判斷 <view wx:if="{{length > 5}}"> </view> 4>字符串運算 <view>{{"hello" + name}}</view> Page({ data:{ name: 'MINA' } }) 5>數(shù)據(jù)路徑運算 <view>{{object.key}} {{array[0]}}</view> Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } }) //綜上: 所有運算都是在{{}}之中進行的,這時候里面就相當于一些語言代碼,而不是要呈現(xiàn)的內(nèi)容
6、組合(不是很常見,不再贅述,如有需要,參考微信小程序開發(fā)文檔,數(shù)據(jù)綁定部分)
感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信小程序中數(shù)據(jù)綁定怎么實現(xiàn)”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業(yè)資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。