Vue implements simple real-time exchange rate calculation function

I have been exploring the use of vue myself recently, because compared to just watching tutorials and examples, I feel it is not as fast as writing a demo to get started. I just happened to see a simple but exquisite application of minimalist exchange rate in the mini program, and its expression form is very similar to that of vue, so I thought about making a simple application myself to try it out.

1. The first step is to set up a simple Html structure

<div id="demo">
    <h1>汇率转换</h1>
    <div class="moneyBox"><span>cny</span><input v-model="cny" type="text"><span>人民币￥</span></div>
    <div class="moneyBox"><span>usd</span><input v-model="usd" type="text"><span>美元$</span></div>
    <div class="moneyBox"><span>hkd</span><input v-model="hkd" type="text"><span>港币$</span></div>
  </div>

2. The logic of the entire page is to bind the inputs of the three currencies to a model. , v-model can transfer this data to the background. When entering any input box, the numbers of other currencies will be calculated based on the exchange rates that have been hard-coded in js. The key ones are the use of computed in Vue and the effect of multiple bindings for each data by writing the get and set functions of the data. It is also worth mentioning that I have also used vue's $watch to implement real-time calculation of data, but in the implementation of two-way binding, I found that computed is more suitable.

var CNY_USD = 6.96;
  var CNY_HKD = 0.90;
  var data={  cny:'100',
        usd:'14.38'  ,
        hkd:'111.53',
      };
  var myVue = new Vue({
   el: '#demo',
   data: data,
   computed: {
     usd:{
       get: function() {
         return (this.cny/CNY_USD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_USD).toFixed(2);
       }
     },
     hkd:{
       get: function() {
         return (this.cny/CNY_HKD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_HKD2Q).toFixed(2);
       }
     }
   }
   })

3. Style supplement

.moneyBox{
      font-size: 20px;
      font-family: "微软雅黑";
    }
    .moneyBox input{
      width: 100px;
      height: 24px;
      padding: 0 10px;
      margin: 0 10px;
      border-radius: 5px;
      border: 1px solid #333;
    }

Because the purpose is just to write a small demo, I simply made a style to make the page readable It's not that awkward. When you have time, you can optimize the user experience of the page and try to directly call the exchange rate API data to implement the calculation.

Page Sharing

The above is the entire content of this article. I hope it will be helpful to everyone’s learning, and I also hope that everyone will join the PHP Chinese website.

For more articles related to vue’s simple real-time exchange rate calculation function, please pay attention to the PHP Chinese website!