[鴻蒙]資料綁定、清單渲染、事件處理

在鴻蒙應用開發中如何使用清單渲染和事件處理改變頁面中某個節點的值。

有過開發微信小程式經驗的小夥伴學習鴻蒙應用開發非常容易過渡過來。

HML（HarmonyOS Markup Language）是一套類HTML的标記語言，通過元件，事件建構出頁面的内容。頁面具備資料綁定、事件綁定、清單渲染、條件渲染和邏輯控制等進階能力。

一個頁面（pages）對應着一個 hml 檔案、一個 js 檔案、一個 css 檔案。

index.js 使用來寫業務代碼的地方，存放資料、函數。index.css 和 index.hml 用來定義頁面中資料顯示的結構和布局以及樣式。

首先，頁面要顯示一些 <code>動态</code> 内容，就需要 <code>資料綁定</code> ，就是将頁面中的資料和 index.js 中的變量綁定起來，在後期有業務需求時改變某個頁面節點中的資料。

打開 index.js 檔案，data 是我們需要聲明變量的位置；函數聲明在 data 之後。

打開 index.hml，定義資料在頁面渲染的結構：

！注意：字元串必須要包裹在 text 标簽内，否則不會渲染到頁面中。

onclick 用于綁定一個點選事件，它可以縮寫成 <code>@click</code> ，這與 Vue 一樣。

<code>for</code> 用來循環數組，每一個數組的索引值和元素包裹在 <code>()</code> 内，第一個值為索引值，第二個值為數組元素。<code>tid</code> 類似于 Vue 中的 <code>:key</code>，旨在清單中的資料有變更時，提高重新渲染的效率。每一項節點必須保證它的 tid 是唯一的。

如果不使用 <code>in</code> 來自定義元素名稱和索引值，就不需要小括号包裹：

預設使用 <code>$item</code> 代表元素，<code>$idx</code> 代表索引值，是 index 的縮寫。

最後點選項，改變其中一個元素的 name 值：