Vue implements simple real-time exchange rate calculation

This article mainly introduces vue's simple real-time exchange rate calculation function, which has some reference value. Interested friends can refer to their own vue usage recently, compared with viewing tutorials and instances, it is better to write a demo by yourself. The small program has a simple but exquisite application with a simple exchange rate, and its expression is similar to that of vue, so I want to try it out by myself.

1. The first step is to build a simple Html structure.

Exchange rate conversion
CnyRMB ￥
    
UsdUSD $
    
HkdHong Kong Dollar $
  

2. The logic of the entire page is to bind the input of the three currencies to a model. The v-model can transmit the data to the background, when any input box is input, the numbers of other currencies are calculated based on the input rate of the JavaScript code. Among them, the key is the use of vue computed and the effect of binding multiple data items by writing the get and set functions of data. It is also worth mentioning that I used vue $ watch for real-time data computing. However, in the implementation of Bidirectional binding, 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 only to write a small demo, a simple style makes the page look less awkward, wait for the time to optimize the user experience on the page and then try to directly call the data of the Exchange Rate api for calculation.

Page sharing

The above is all of the content in this article. I hope it will be helpful for everyone's learning and support for PHP's Chinese Web.

For more information about vue's implementation of the simple real-time exchange rate calculation function, refer to PHP's Chinese website!