? 同學們大家好，我是小伊同學，今天帶領大家學習WXML部分一個重要的知識點，數據綁定。

? 簡單來講，數據綁定就是通過雙重花括號將一個變量綁定到界面上。

? 首先，我們為什么要將變量綁定到頁面上呢？因為在制作一個小程序時，很多數據都是后端服務器返回給我們的，我們需要對這些數據進行處理后顯示在頁面上，也就是說，這些數據是動態的，我每次加載小程序都先去詢問服務器，那么我就不能在代碼中將這些數據直接寫在前端界面中。

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

? 數據綁定的格式是，在wxml文件中需要的地方加入雙花括號，括號中寫變量名稱，然后將該變量在js文件中進行定義。當wxml在加載組件及組件的屬性時，會自動將該格式下的變量名拿到js文件中尋找，并將數據值渲染到頁面上。

? 這樣，通過js對該變量的具體值進行改變后，顯示在頁面上的數值就會跟著改變了。具體示例請看右邊的兩幅圖，上面是頁面的wxml文件，中間是頁面的js文件，最下面則是運行結果。可以看到，我們在js中對變量的賦值直接顯示到了wxml中。

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

? 第一，放在內容中，用我們之前學習的組件標簽包括起來。

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

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

? 此外，也可以在{{}}內進行簡單的運算，例如三元運算和算術運算。在三元運算中，這里的花括號中為一個表達式，其一般形式為變量、空格、問號、空格、數值A、冒號、數值B。當變量等于第一個值時，表達式的結果為真，也就是這里flag變量為真值，即等于true時，最終hidden屬性為true，即組件被隱藏，而當flag為false時，表達式結果為假，組件不被隱藏。

? 在進行算數運算時要注意，只有在雙重花括號中的運算符，如加號減號等，具有運算符的作用，對前后的變量值完成算術運算，而在花括號外的運算符沒有運算能力，僅僅是字符串。

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

? 使用數據綁定還有很多方式，例如邏輯判斷、字符串運算、數據路徑運算等，也可以在雙重花括號內直接進行組合，構成新的對象或者數組，更多內容同學們可以通過微信開發者文檔自學。

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

想看視頻版？

關注公號“微程序學堂”，我們的視頻教程即將上線

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

請聯系我們

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。