Simple real-time exchange rate calculation function with Vue

Source: Internet
Author: User

Recently in their own groping Vue's use, because compared to just go to see tutorials and examples, feel better to write a demo to get started quickly. Just see the applet has a simple but very delicate application of the minimalist exchange rate, and its expression is similar to Vue's form of expression, so think of a simple application to try it.

  1. The first step is to build a simple HTML structure.
    <DivID= "Demo">        <H1>Exchange rate Conversions</H1>        <Divclass= "Moneybox"><span>CNY</span><inputV-model= "CNY"type= "text"><span>RMB ¥</span></Div>        <Divclass= "Moneybox"><span>Usd</span><inputV-model= "USD"type= "text"><span>USD $</span></Div>        <Divclass= "Moneybox"><span>Hkd</span><inputV-model= "HKD"type= "text"><span>HK $</span></Div>    </Div>
  2. The logic of the entire page is to bind the input of the three currency to a Model,v-model can pass this data to the background, when any input box input will be based on JS has been written dead exchange rate to calculate the number of other currencies. One of the key things is the use of Vue's computed and the effect of using the get and set functions of writing data to achieve multiple bindings for each data. It is also worth mentioning that I used the Vue $watch to achieve real-time data calculation, but in the implementation of two-way binding is found to be more appropriate computed.
    varCNY_USD = 6.96; varCNY_HKD = 0.90; vardata={CNY: ' 100 ', USD:' 14.38 ', HKD:' 111.53 ',            }; varMyvue =NewVue ({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 : " Microsoft Jas Black ";  } { width :  100px ; :  24px ;  padding :  0 10px ;  margin :  0 10px ;  Border-radius :  5px ;         border :  1px solid #333 ; }

    Because the purpose is just to write a small demo, so simple to do a style, so that the page does not look so awkward, and so there is time to optimize the user experience of the page and then try to directly call the exchange rate API data to achieve the calculation.

  4. Page sharing

    

    

Simple real-time exchange rate calculation function with Vue

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.