本文同步發表於Andy's Blog

前言

這兩天，我們介紹了computed、watch、method()、filter屬性。並且對這些特性的使用方式做了介紹與比較。而今天我們就來複習一下，透過computed、method屬性來寫一個簡單的貨幣轉換器，來加深我們的印象。

練習一

說明：今天我們要做一個美元匯率兌換器，假設 1美元 = 31.0530075 台幣

練習連結
我們先使用methods方法來做練習
HTML部分

 <div id="app">
    <p>1 美元 = 31.0530075 台幣</p>
    <div>美元 <input type="text" v-model="usd" @input="usdtotwd"></div>
    <div >新台幣 <input type="text" v-model="twd" @input="twdtousd"></div>
  </div>

JavaScript部分

   const vm = new Vue({
      el: '#app',
      data: {
        twd: 31.05,
        usd: 1
      }, 
      methods:{
        usdtotwd(){
          this.twd = this.usd * 31.0530075
        },
        twdtousd(){
          this.usd = this.twd / 31.0530075
        }
      }
    });

示意圖

練習二

我們今天想要做出一個將台幣、港幣、美金這三種幣別兌換的匯率轉換器。

如果我們使用上述methods方法，變成要寫usdtotwd、usdtohk、twdtousd、twdtohk、 hktotwd 、hktousd共六種方法，如此一來便會造成程式碼非常冗長。

這時，我們就可以善用computed來幫助我們解決問題！因為總金額數目是不變的，因此我們只要以一種貨幣當作基準值，就能輕鬆寫出不同貨幣的轉換。

練習連結

  <div id="app">
    <p>1 美元 = 31.0530075 台幣</p>
    <p>1 美元 ＝ 7.83914083 港幣</p>
    <div>美元 <input type="text" v-model="usd"></div>
    <div>新台幣 <input type="text" v-model="twd"></div>
    <div>港幣 <input type="text" v-model="hk"></div>
  </div>

JavaScript部分

       const vm = new Vue({
      el: '#app',
      data: {
      // twd: 31.05,
      // hk:7.83,
       usd: 0,
      }, 
      computed:{
        twd:{
          //初始值
          get(){
            return this.usd * 31.05
          },
          //更動後的值
          set(val){
            this.usd =val/31.05
          }
        },
        hk:{
          get(){
            return this.usd *7.83
          },
          set(val){
            this.usd =val/7.83
          }
        }
      }
    });

示意圖

備註：這題解法概念其實就是SSOT - Single Source of Truth概念，我們會在之後Vuex單元提到。有興趣的人可以先看一下參考資料喔！

參考資料

• VueJS 元件 (Component) 之間資料溝通傳遞的方式