JSFiddle - React, Tailwind, and code Playground

by kurotanshi

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 台幣</p>
  <div>台幣 <input type="text" v-model="twd" @input="twd2jpy"></div>
  <div>日幣 <input type="text" v-model="jpy" @input="jpy2twd"></div>
</div>

CSS

body {
  padding: 1rem;
}

JavaScript

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