Home > Web Front-end > JS Tutorial > body text

Vue implements simple real-time exchange rate calculation function

高洛峰
Release: 2017-01-16 13:03:30
Original
1725 people have browsed it

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>
Copy after login

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:&#39;100&#39;,
        usd:&#39;14.38&#39;  ,
        hkd:&#39;111.53&#39;,
      };
  var myVue = new Vue({
   el: &#39;#demo&#39;,
   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);
       }
     }
   }
   })
Copy after login

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;
    }
Copy after login

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

Vue implements simple real-time exchange rate calculation function

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!