vue 多國兌幣換算

by ysuper

HTML

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  <p>假設, 1 日幣 = 0.278 台幣, 且 1 美金 = 28.540 台幣: </p>
  <div>台幣 <input type="text" v-model="twd"></div>
  <div>日幣 <input type="text" v-model="jpy"></div>
  <div>美金 <input type="text" v-model="usd"></div>
</div>

CSS

body {
  padding: 1rem;
}

JavaScript

const vm = Vue.createApp({
  data() {
    return {
      twd: 1000
    }
  },
  computed: {
    jpy: {
      get() {
        return Number.parseFloat(Number(this.twd) / 0.278).toFixed(3);
      },
      set(val) {
        this.twd = Number.parseFloat(Number(val) * 0.278).toFixed(3);
      }
    },
    usd: {
      get() {
        return Number.parseFloat(Number(this.twd) / 28.540).toFixed(3);
      },
      set(val) {
        this.twd = Number.parseFloat(Number(val) * 28.540).toFixed(3);
      }
    }

  }
}).mount('#app');