/* index.js */import device from '@system.device';export default { data: { title : 'world', width: 0, height: 0, },onInit(){ // 根據設備設置窗口的寬高 device.getInfo({ success: (data)=> { this.width =data.windowWidth; this.height =data.windowHeight; } }); }}/* index.css */.container { flex-direction:column; justify-content:flex-start; align-items:flex-start;}

本文的代碼例子都會包含三個文件——元素構建.hml、交互設計.js以及布局定義.css，只有.hml中可以寫數據綁定語法，請各位在閱讀時注意區分。下面來介紹HarmonyOS簡單數據綁定和復雜數據綁定。

02

HarmonyOS簡單數據綁定

HarmonyOS的簡單數據綁定支持“屬性綁定”、“樣式綁定”、“動畫綁定”和“內容綁定”。樣式綁定和動畫綁定實際上是通過屬性標簽發揮作用的，下面我們詳細看一下具體使用過程。

1）屬性綁定

屬性可分為“通用屬性”和“特有屬性”，其中通用屬性包括id、style、for、if、show和class，特有屬性為各組件獨有的屬性如switch的checked。下面我們先看通用屬性show綁定switch顯示數據的代碼：

點擊藍色按鈕，代表觸發改變switch 中show屬性的“事件”，show屬性的值從“false”改變為“true”，switch組件（白色開關按鈕）會在界面上顯示出來。如圖1所示：

圖1 通用屬性show改變導致switch顯示改變

/*index.js*/import device from '@system.device';export default{ data:{ showValue:false, width:0, height:0,}, // showChange觸發會使showValue值改變 showChange(){ this.showValue =true; }, onInit(){ device.getInfo({ success:(data)=>{ this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width:40px; height:40px;}.switch{ width:90px; height:90px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

特有屬性是各個組件獨有的屬性，如switch中的checked。下面是switch中checked屬性數據綁定的用法：

點擊藍色按鈕，代表觸發改變switch 中checked屬性的“事件”，checked屬性的值從“false”改變為“true”，switch組件（白色開關按鈕）的狀態從“關”變成“開”。如圖2所示：

圖2 特有屬性checked改變導致switch狀態改變

/* index.js */importdevicefrom'@system.device';export default { data: { checkedValue: false, width: 0, height: 0, },//checkedChange觸發會使checkedValue值改變 checkedChange() { this.checkedValue = true; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

2）樣式綁定

樣式有靜態和動態之分，靜態樣式直接寫在元素標簽的關鍵字style中；動態樣式寫在.css文件中，通過關鍵字class引入。當前動態樣式不支持數據綁定，數據綁定只能用在靜態樣式中，下面是switch靜態樣式寬高的數據綁定用法：

點擊藍色按鈕，代表觸發改變switch 中靜態樣式寬高改變的“事件”，靜態樣式寬高的值從“40px”改變為“90px”，switch組件（白色開關按鈕）的寬高變大。如圖3所示：

圖3 通用樣式寬高改變導致switch組件大小改變

/* index.js */importdevicefrom'@system.device';export default { data: { rectValue: '40px', width: 0, height: 0, },//rectChange觸發會使rectValue值改變 rectChange() { this.rectValue = '90px'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

3）動畫綁定

動畫效果可以通過靜態樣式中的關鍵字animation-name改變。我們可以在.css文件中創建多種keyframes的動畫效果，通過animation-name改變keyframes，以實現動畫效果的切換，下面是一個例子：

點擊藍色按鈕，這是代表觸發改變div 中動畫效果的"事件"，animation-name的值從“animationChange1”改變為“animationChange2”，div組件動效從顏色變化動效變成寬度變化動效。如圖4所示：

圖4 animation-name改變導致動畫樣式改變

/*index.js*/import device from '@system.device';export default { data: { animationName: 'animationChange1', width: 0, height: 0, }, //animationChange觸發會使animationName值改變 animationChange() { this.animationName ="animationChange2"; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.div-block { width: 200px; height: 80px; background-color: #ff0000;}.div-animation-style{ animation-duration: 3000ms; animation-timing-function: linear; animation-fill-mode: none; animation-iteration-count: 1;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}/* 初始動畫效果改變背景顏色 */@keyframes animationChange1 { from { background-color: #ff0000; } to { background-color: #0000ff; }}/* 切換后動畫效果改變為方塊寬度變化 */@keyframes animationChange2 { from { width: 200px; } to { width: 250px; }}

4）內容綁定

除了屬性、樣式和動畫綁定，HarmonyOS一些特殊組件如text，其標簽內容中可以添加數據綁定，具體使用方法如下：

點擊藍色按鈕，代表觸發改變text 中文字內容的“事件”，text組件中文字內容從“Hello World”改變為“Hello Bob”，界面顯示的文字相應改變。如圖5所示：

圖5 文字數據改變導致text中的文字內容改變

/*index.js*/import device from '@system.device';export default { data: { title: 'World', width: 0, height: 0, },//titleChange觸發會使text中的title值改變 titleChange() { this.title = 'Bob'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.title { width: 100px; height: 100px; font-size: 20px; text-align: center;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

簡單數據綁定中，通用屬性基本都支持數據綁定，如style、if和show中綁定的對象數據改變都會使相應的View改變并刷新，只有class不支持數據綁定。同時，id雖然支持數據綁定，但其綁定的對象數據改變實際上只修改了DOM，不會對View有影響。

03

HarmonyOS復雜數據綁定

當數據綁定的對象為列表（數組）時，與for搭配使用，可以實現通過for展開多個組件（即列表渲染），減少.hml重復寫組件。復雜數據綁定和列表渲染是強相關的，我們可以先了解一下HarmonyOS應用開發中如何用for屬性做列表渲染。

1）列表渲染

參考HarmonyOS官網的開發文檔：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-syntax-hml-0000001078368468

我們可以看到列表渲染主要有三種方式：

for="array"：其中array為數組對象，array的元素變量默認為$item。

for="v in array"：其中v為自定義的元素變量，元素索引默認為$idx。

for="(i, v) in array"：其中元素索引為i，元素變量為v，遍歷數組對象array。

這三種方式的實現代碼為：

//index.jsexport default { data: { array: { {id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18} } }}

2）通用屬性的復雜數據綁定

下面以靜態style屬性為例，將style和數組進行數據綁定，可以通過改變數組的數據讓組件樣式改變，具體使用方法如下：

點擊藍色按鈕，代表觸發改變與數組綁定的某switch組件寬高的“事件”，第二個switch靜態樣式寬高的值從“40px”改變為“90px”，switch組件（白色開關按鈕）的寬高變大。如圖6所示：

圖6 綁定靜態樣式的數組改變導致switch寬高改變

/*index.js*/import device from '@system.device';export default { data: {//定義兩個寬高相等的switch rectArr: [ {"width": "40px","height": "40px"}, {"width": "40px","height": "40px"} ], width: 0, height: 0, },//改變第二個switch大小 switchChange() { this.rectArr[1].width = "90px"; this.rectArr[1].height = "90px"; }, // 推薦使用splice方法改變switch大小 // switchChange() { // this.rectArr.splice(1, 1, {"width": "90px", "height": "90px"}); //} onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

然而，有一些屬性不支持復雜數據綁定，例如， if屬性和swiper組件的loop屬性等。他們的對象數據改變，都無法改變相應的view層顯示效果，具體組件的數據綁定支持情況可以查閱官方開發文檔。

04

總結

HarmonyOS簡單數據綁定，可以支持“屬性綁定”、“樣式綁定”、“動畫綁定”和“內容綁定”。HarmonyOS復雜數據綁定支持情況和簡單數據綁定支持情況相同。對于諸多組件中存在的特有屬性的復雜數據綁定支持情況，歡迎各位開發者參與驗證。最后概括HarmonyOS數據綁定的使用技巧：

1. HamonyOS僅支持單向的數據綁定，語法為Mustache；

2. 在簡單數據綁定場景下，style、if和show及特有的屬性都會刷新View的顯示；

3. 在簡單數據綁定場景下，靜態樣式中的animation-name更改會刷新View的動畫效果；

4. 在簡單數據綁定場景下，text等組件的內容綁定更改會刷新View的顯示；

5. 在復雜數據綁定場景下，數據綁定的支持情況和簡單數據綁定相同，推薦使用splice方法對數據內容進行增刪；

以下思維導圖概括了該版本下HarmonyOS數據綁定的支持情況。

圖7 HarmonyOS數據綁定全貌圖

編輯：jq