Simple real-time exchange rate calculation function with Vue

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.

5. Page sharing

　　　　

　　　　

Simple real-time exchange rate calculation function with Vue