[[359792]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

第一個世界版Hello World完畢后，畢竟還是靜態文字，還沒什么互動!

接下來，各種吃瓜觀眾，來看一下互動有多簡單易用，我們就來增加一個簡單的功能，點擊“我愛鴻蒙”后，加一串字“你點了我”。

之前的index.hml是頁面，相應的index.js是頁面的邏輯所在，切換到index.js中，

加入一段互動代碼：

, 
changeTitle() { 
    this.title += "你點了我！" 
} 

這個changeTitle方法，顧名思義，就是要改變 data中的 title變量， 在原來的文字基礎上加 “你點了我!”。

簡單吧!

然后切換到index.hml中，在text的屬性中，增加點擊互動代碼：

onclick="changeTitle" 

位置如下圖：

這時候切換到預覽器，刷新后，點一下“我愛鴻蒙”試試，效果應該如下：

瘋狂輸出呢?

[[359793]]

世界人民愛上點擊，那么問題來了， 怎么把這個“你點了我”，變成各國語言版本的呢???

給你5分鐘思考吧。

好了，我直接給答案：

先在各語言的json文件中，加入一個clickme字段，比如zh-CN.json：

{ 
  "strings": { 
    "hello": "我愛", 
    "world": "鴻蒙！", 
    "clickme": "你點了我！" 
  } 
} 
 
英文、日文、韓文的內容分別如下： 
 
{ 
  "strings": { 
    "hello": "I love", 
    "world": "Harmony OS!", 
    "clickme": "You clicked me!" 
  } 
} 
 
  
 
{ 
  "strings": { 
    "hello": "ハーモニーOS", 
    "world": "が大好き！", 
    "clickme": "あなたは私をクリックしました！" 
  } 
} 
 
  
 
{ 
  "strings": { 
    "hello": "나는 하모니 OS", 
    "world": "를 좋아한다!", 
    "clickme": "날 클릭 했어!" 
  } 
} 

有了增加字段的操作之后，回到index.js中，把改動的部分，加入到title的增量中：

changeTitle() { 
 
this.title += this.$t('strings.clickme') 
 
} 

 你現在猜道 this.$t('')的用法了吧?

沒錯，this.$t()就是取多語言文字資源中的字段的值。為什么是t，我猜是text的縮寫? 這個縮寫有點怪，設計師出來我不打死你，讓人亂猜這樣好嗎?

現在可以刷新預覽器，來試試了!效果如下：

第一個互動完成了!國際化有沒有!接下來內容更精彩!繼續關注啊

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz