Vue 出一個貨幣轉換器

參考資料

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

---

練習一

說明：今天我們要做一個美元匯率兌換器，假設 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單元提到。有興趣的人可以先看一下參考資料喔！