TOXIC视频在线观看,中国XX爽69护士,AV乱伦片

相信各位應用開發者在寫應用的前端部分時，會遇到這樣的場景：通過某一事件觸發界面上某一內容改變。比如說手表上心率數據的變化，是心率變化的事件觸發手表界面心率數據的改變?？此坪唵蔚膱鼍?，實際上用到了“數據綁定”這一技術。

“事件”首先改變的是js中的一段文字對象，因js中的文字對象和標記語言的text組件里的文字內容做了數據綁定，使得改變js文字對象的操作能夠令text組件里的文字內容發生改變。

“數據綁定”是實現上述場景最基礎的技術，本文會基于一系列實例詳細介紹”HarmonyOS數據綁定“的使用方法和技巧。

數據綁定概念

數據綁定，指的是將界面元素（View）的數據和對象實例（Model）的數據進行綁定，使它們具有相關性。

根據界面元素更新是否會引起對象實例的更新，數據綁定可分為單向數據綁定和雙向數據綁定。單向數據綁定指的是對象實例的數據更新會引起界面元素的更新，反之不行；雙向數據綁定指的是對象實例的數據更新會引起界面元素的數據更新，界面元素的數據更新也會引起對象實例的數據更新。

根據對象實例數據類型的不同，數據綁定又可分為簡單數據綁定和復雜數據綁定，簡單數據綁定數據為基本類型，而復雜數據綁定數據為列表類型。

1）HarmonyOS中的數據綁定

HarmonyOS目前支持單向數據綁定，即通過對象實例的數據更新來改變界面元素的數據。下面是Mustache語法數據綁定的通用寫法的代碼例子：

Hello {{title}}

/* 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簡單數據綁定和復雜數據綁定。

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中的文字內容改變

Hello {{ title }}

/*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有影響。

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。

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

{{$idx}}.{{$item.name}}

{{$idx}}.{{value.name}}

{{index}}.{{value.name}}

//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層顯示效果，具體組件的數據綁定支持情況可以查閱官方開發文檔。

總結

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

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

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

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

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

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

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