iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
1
自我挑戰組

前端新手筆記-Vue.js系列 第 14

Day14 練習做一個貨幣轉換器

本文同步發表於Andy's Blog

前言

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

練習一

說明:今天我們要做一個美元匯率兌換器,假設 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方法,變成要寫usdtotwdusdtohktwdtousdtwdtohkhktotwdhktousd共六種方法,如此一來便會造成程式碼非常冗長。

這時,我們就可以善用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單元提到。有興趣的人可以先看一下參考資料喔!


參考資料


上一篇
Day 13 Vue Filter 過濾器介紹
下一篇
Day 15 Vue Component(元件) 介紹、建立方式、特性
系列文
前端新手筆記-Vue.js30

1 則留言

0
kkdayy_55330
iT邦新手 5 級 ‧ 2020-02-04 14:56:17

嗨大大您好,請問這當中的 @input 是什麼呢?

 <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>

THX.

chunwen iT邦新手 5 級 ‧ 2020-02-05 14:49:38 檢舉

hi 您好
這是事件v-on事件的縮寫,完整寫法如下

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

詳情可以上Vue官網查看
連結

謝謝!

我要留言

立即登入留言