? 同學(xué)們大家好，我是小伊同學(xué)，今天帶領(lǐng)大家學(xué)習(xí)WXML部分一個(gè)重要的知識(shí)點(diǎn)，數(shù)據(jù)綁定。

? 簡(jiǎn)單來講，數(shù)據(jù)綁定就是通過雙重花括號(hào)將一個(gè)變量綁定到界面上。

? 首先，我們?yōu)槭裁匆獙⒆兞拷壎ǖ巾撁嫔夏?#xff1f;因?yàn)樵谥谱饕粋€(gè)小程序時(shí)，很多數(shù)據(jù)都是后端服務(wù)器返回給我們的，我們需要對(duì)這些數(shù)據(jù)進(jìn)行處理后顯示在頁面上，也就是說，這些數(shù)據(jù)是動(dòng)態(tài)的，我每次加載小程序都先去詢問服務(wù)器，那么我就不能在代碼中將這些數(shù)據(jù)直接寫在前端界面中。

? 例如，用戶的某些操作記錄，賬戶余額等等信息，都唯一地保存在服務(wù)器端，而小程序則完成了一個(gè)獲取并展示的作用。要實(shí)現(xiàn)這樣的效果，我們就需要在wxml使用變量，當(dāng)程序運(yùn)行時(shí)通過對(duì)變量賦不同的值來完成數(shù)據(jù)的加載顯示。這就是數(shù)據(jù)綁定的意義。

? 數(shù)據(jù)綁定的格式是，在wxml文件中需要的地方加入雙花括號(hào)，括號(hào)中寫變量名稱，然后將該變量在js文件中進(jìn)行定義。當(dāng)wxml在加載組件及組件的屬性時(shí)，會(huì)自動(dòng)將該格式下的變量名拿到j(luò)s文件中尋找，并將數(shù)據(jù)值渲染到頁面上。

? 這樣，通過js對(duì)該變量的具體值進(jìn)行改變后，顯示在頁面上的數(shù)值就會(huì)跟著改變了。具體示例請(qǐng)看右邊的兩幅圖，上面是頁面的wxml文件，中間是頁面的js文件，最下面則是運(yùn)行結(jié)果。可以看到，我們?cè)趈s中對(duì)變量的賦值直接顯示到了wxml中。

? 那么，到底在wxml中哪些地方可以使用數(shù)據(jù)綁定呢？主要有以下幾處位置：

? 第一，放在內(nèi)容中，用我們之前學(xué)習(xí)的組件標(biāo)簽包括起來。

? 第二，使用數(shù)據(jù)綁定來動(dòng)態(tài)改變屬性值，包括組件屬性或者控制屬性，這里的id就是在js中我們需要定義好的變量，而下面的控制屬性wx：if語句用于控制這個(gè)組件是否顯示，如果condition變量為真值則顯示，為假不顯示。

? 最后，用于控制關(guān)鍵字，需要說明的是，這里的true和false并不代表變量，而是boolean類型，表示真值和假值。如果我們直接寫成checked=“false”，去掉雙重花括號(hào)，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后無論是true還是false最后都代表真值。(空字符串才為假)

? 此外，也可以在{{}}內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，例如三元運(yùn)算和算術(shù)運(yùn)算。在三元運(yùn)算中，這里的花括號(hào)中為一個(gè)表達(dá)式，其一般形式為變量、空格、問號(hào)、空格、數(shù)值A(chǔ)、冒號(hào)、數(shù)值B。當(dāng)變量等于第一個(gè)值時(shí)，表達(dá)式的結(jié)果為真，也就是這里flag變量為真值，即等于true時(shí)，最終hidden屬性為true，即組件被隱藏，而當(dāng)flag為false時(shí)，表達(dá)式結(jié)果為假，組件不被隱藏。

? 在進(jìn)行算數(shù)運(yùn)算時(shí)要注意，只有在雙重花括號(hào)中的運(yùn)算符，如加號(hào)減號(hào)等，具有運(yùn)算符的作用，對(duì)前后的變量值完成算術(shù)運(yùn)算，而在花括號(hào)外的運(yùn)算符沒有運(yùn)算能力，僅僅是字符串。

? 所以對(duì)于這里的例子來說，如果a等于1，b等于2，c等于3，d等于4，那么最終會(huì)顯示3+3+d這個(gè)字符串，運(yùn)算只在a變量和b變量之間完成，d由于沒有加花括號(hào)，僅僅是字符串，無論d是否在js中定義或者d的值是多少都不影響結(jié)果。

? 使用數(shù)據(jù)綁定還有很多方式，例如邏輯判斷、字符串運(yùn)算、數(shù)據(jù)路徑運(yùn)算等，也可以在雙重花括號(hào)內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組，更多內(nèi)容同學(xué)們可以通過微信開發(fā)者文檔自學(xué)。

? 好了，本小節(jié)的內(nèi)容就是這些，如果大家有什么問題，歡迎在文末留言，我們明天繼續(xù)喲~

想看視頻版？

關(guān)注公號(hào)“微程序?qū)W堂”，我們的視頻教程即將上線

如果你自己寫了好文章想投稿

請(qǐng)聯(lián)系我們

總結(jié)

以上是生活随笔為你收集整理的前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。