在先前的教學中寫到，微信小程式框架將程式分成邏輯層(.js檔案)和視圖層(.wxml檔)。這是一種常見的UI和邏輯分離的程式設計方式，開發出來的程式更加靈活，易於擴展。
這種程式設計方式通常要解決兩個問題:
UI層回應邏輯層邏輯和資料的變化
UI層將使用者的操作回饋到邏輯層
通常來說可以讓UI層和邏輯層互相暴露接口給對方，不過出於對靈活性和擴展性的考慮，會引入中間層來進行管理，這樣可以避免UI層和邏輯層之間的直接依賴。
微信小程式框架正是基於這種模式進行設計的，.wxml檔案來描述UI層(微信官方名稱為視圖層，教程後續也將用視圖層來命名)，.js檔案來處理邏輯層，而微信的框架則作為中間層管理兩者之間的呼叫。
為了更好的幫助開發者開發微信小程序，微信定義了一些語法和規則來幫助開發者連接視圖層和邏輯層。
顯示字串內容
//page.wxml
<text class="user-motto">{{motto}}</text>
//page.js
data: {
motto: 'Hello World',
},透過將"{{motto}}"嵌入視圖層程式碼中，介面會顯示"Hello World"
更改字串內容
setData({
motto:'Hello My World'
})當執行上述程式碼後，介面會顯示"Hello My World"
上述部分有兩點需要說明:
1: 視圖層嵌入的是{{motto}}而不是{{data.motto}} ，微信框架預設設定視圖層綁定的變數定義在Page物件的data屬性中，也就是說，如果變數需要綁定到視圖層，一定要定義data屬性中
2: 透過呼叫Page物件的setData#(Page物件預先定義)方法，可以更新介面數據，但是直接設定變數是無效的，因此對於綁定到視圖層的變量，永遠使用setData方法來設定變數值
#顯示圖片
在開發工具預設產生的程式首頁，顯示了使用者的頭像，相關程式碼如下:
//index.wxml
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
//index.js
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}image標籤的src屬性綁定了userInfo.avatarUrl變量，並在onLoad方法中透過呼叫setData方法設定userInfo。
屬性綁定
可以將變數綁定到視圖元件的屬性值上(如上面image標籤的src屬性)，注意在綁定到屬性時，需要在外面加入一對雙引號。
src="{{userInfo.avatarUrl}}"除了用來顯示圖片外，屬性綁定還有許多作用。
關聯數據
假設要做一個學生管理程序，頁面使用列表來展示用戶數據，當用戶點擊某一學生資訊時，進入該學生的詳情頁頁。
當取得到使用者的點擊事件時，必須要知道點擊的是哪一個學生的數據，這時可以將學生的id綁定到視圖組件的id屬性中來進行數據關聯。
控制視圖的隱藏/顯示
可以將變數綁定到視圖元件的hidden屬性中，透過更改元件hidden屬性的值，可以控制元件是否顯示。
控制屬性
上面說到可以透過屬性綁定的方法來控制視圖元件是否顯示，也可以透過控制屬性來實現這項功能。
//Page.wxml
<view wx:if="{{condition}}"> </view>
//Page.js
Page({
data: {
condition: true
}
})透過綁定資料到wx:if屬性，可以控制該元件是否顯示。
框架也提供了wx:elif和wx:else屬性，用法如下:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>如果想同時控制多個視圖元件，可以使用block wx:if
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>同樣，控制屬性綁定時也需要加入雙引號
#wx:if vs hidden
##一般來說，wx:if 有更高的切換消耗而hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情境下，用 hidden更好，如果在運行時條件不大可能改變則 wx:if 較好。
關鍵字框架提供了兩個關鍵字來表示
真和假## true
：boolean 型別的true，代表真值。 false
： boolean 類型的 false，代表假值。 程式碼範例
<checkbox checked="{{false}}"> </checkbox>關於資料綁定的更多敘述，敬請期待小程式開發基礎篇之資料綁定下（8）
#
以上是小程式開發基礎篇之資料綁定上篇（7）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
