今天決定先來嘗試一下昨天最後提到的幣值轉換器的程式，先假設我只需要轉換一個幣值所以使用methods將程式寫成這樣:

  <div id="app">
    <p>1日幣 = 0.21台幣</p>
    <div>台幣(twd) <input type="text" v-model="twd" v-on:input="twd2jpy"></div>
    <div>日幣(jpy) <input type="text" v-model="jpy" v-on:input="jpy2twd"></div>
  </div>

    const vm = Vue.createApp({
      data(){
        return{
          twd: 0.21,
          jpy: 1,
        }
      },
      methods: {
        twd2jpy(){
            this.jpy = Number.parseFloat(Number(this.twd)/0.21).toFixed(3);
        },
        jpy2twd(){
            this.twd = Number.parseFloat(Number(this.jpy)*0.21).toFixed(3);
        },
      }
    }).mount('#app');

然後在上面的程式負責計算的function裡面我有不知道的部分所以稍微說明一下，算法基本都是利用JavaScript用來計算的方法，因為我們前面設定user輸入的數字是以字串text儲存的，所以需要利用"parseFloat()"來將字串轉換為float浮點數。而"toFixed(3)"代表四捨五入取小數點到第3位，當然改變()裡的數字也可以更改要取小數點到第幾位。然後v-on是我們在前面幾章有提到過的Vue.js指令，這裡用它來監聽input事件有沒有被觸發。
接下來讓我們把上面的程式從methods更改為computed:

  <div id="app">
    <p>1日幣 = 0.21台幣</p>
    <div>台幣(twd) <input type="text" v-model="twd"></div>
    <div>日幣(jpy) <input type="text" v-model="jpy"></div>
  </div>

    const vm = Vue.createApp({
      data(){
        return{
          twd: 0.21
        }
      },
      computed: {
        jpy: {
          get() {
            return Number.parseFloat(Number(this.twd) / 0.21).toFixed(3);
          },
          set(val) {
            this.twd = Number.parseFloat(Number(val) * 0.21).toFixed(3);
          }
        }
      }
    }).mount('#app');

在改過的程式裡面，我們只把台幣(twd)的data留下來當作基準，而讓日幣(jpy)成為一個computed計算出來的實體，而有關computed除了get我們需要的程式碼結果，這是因為使用set我們可以將實體加工再回傳，這樣程式就只需要twd作為標準數據，其他的幣值都是對twd進行計算的結果我們也可以很輕鬆地再加入其他希望轉換的幣值。比如我們再加入美金:

<div id="app">
    <p>1日幣 = 0.21台幣，1美金 = 32.25台幣</p>
    <div>台幣(twd) <input type="text" v-model="twd"></div>
    <div>日幣(jpy) <input type="text" v-model="jpy"></div>
    <div>美金(usd) <input type="text" v-model="usd"></div>
  </div>

    const vm = Vue.createApp({
      data(){
        return{
          twd: 0.21
        }
      },
      computed: {
        jpy: {
          get() {
            return Number.parseFloat(Number(this.twd) / 0.21).toFixed(3);
          },
          set(val) {
            this.twd = Number.parseFloat(Number(val) * 0.21).toFixed(3);
          }
        },
        usd: { 
        get() {
            return Number.parseFloat(Number(this.twd) / 32.25).toFixed(3);
          },
          set(val) {
            this.twd = Number.parseFloat(Number(val) * 32.25).toFixed(3);
          }
      }
      },
    }).mount('#app');

就跟上面的程式一樣，只要修改幣值的加乘數，新的可以轉換的幣值就會增加，而這也確實是比用methods每個function都要把兩個數重新定義方便很多。在這裡也放一下整個程式在網頁上呈現的樣子:

至於在教材中有提到的Vue.js裡面還有一個與methods相似的"filters"因為在Vue3就被淘汰了所以我會選擇略過這個部分。而在明天的進度我將學習之前在常用指令的部分沒有提到的Vue.js的其他指令，謝謝閱讀。