Vue implements simple exchange rate converters
I. Important points:
1. Data binding
The value of the value attribute bound to option in select
Use 2.@change and @click
Dynamic display and data processing
3. Association between different types of data
Object array and Map
Data:
countryList:[
{ id: '1'.key: 'CNY'.name: 'CNY - RMB '},
{ id: '2'.key: 'USD'.name: 'USD - USD ' },
{ id: '3'.key: 'EUR'.name: 'EUR - euro ' },
{ id: '4'.key: 'GBP'.name: 'GBP - Pound sterling ' },
{ id: '5'.key: 'JPY'.name: 'JPY - yen ' },
{ id: '6'.key: 'HKD'.name: 'HKD - Hong Kong dollars' },
{ id: '7'.key: 'AUD'.name: 'AUD - AUD ' },
{ id: '8'.key: 'CAD'.name: 'CAD - Canadian dollars'},].Copy the coderates: new Map([["CNY".1],
["USD".0.1503],
["EUR".0.1266],
["GBP".0.1144],
["JPY".15.7243],
["HKD".1.1646],
["AUD".0.2115],
["CAD".0.198]],Copy the codeIi. Effects:
1. Initial page
The outline and content are as follows:
2. Dynamic effects
Click on the select drop-down box and the page will respond dynamically
3. Results page
Enter the exchange amount, click query calculation, and the results are displayed below
3. Analysis:
1. Page:
The whole is relatively simple, top, middle and bottom three div, the top div just put a text line; The middle div is divided into three smaller divs, each containing a text and an input box. The div below is also divided into three smaller divs, as shown above.
2. Logic:
The main is to achieve data acquisition, calculation, display: the two data association is the key of the object array and the key in the map, but the two groups of data need different values. This select is bound to the value of the option value property, so replacing the option value with the id in the array of objects, you can use the ID to get the value of the other property in the array of objects, this. Object array name [id]. Attribute name this gives the key and name of the object array; This. Map name.get (key).
Four. Code:
The following is my implementation of the effect of the code written, novice, style is very simple, mainly to understand the page logic!
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > rate < / title > < script SRC =" https://cdn.jsdelivr.net/npm/vue "> < / script > < / head > < body > < div Id = "fd - f" > < div id = 'app' > < div id = > 'fd - h' exchange rate query converter < / div > < div id = 'fd - 1 > hold currency: <! -- {{select}} --> <select id='fd-1-s' v-model="select1" @change="count" > <option v-for="c in countryList" :key="c.id" C.i: value = "d" > {{c.n ame}} < option > < / select > < / div > < div id = 'fd - 2 > target currency: <select id='fd-2-s' v-model="select2" @change="count"> <option v-for="c in countryList" :key="c.id" :value="c.id"> {{c.n ame}} < / option > < / select > < / div > < div id = > 'fd - 3' cash compensation: < input id = 'fd - 3 - I "type =" text "v - model =" v "/ > < input id =' fd - 3 - b type =" button "@ click =" count "value =" query computing "> < / div > < hr Id = 'fd - x > < div id =' fd - 4 '> < h3 > {{sn1}} for {{sn2}} : < / h3 > < div id = fd - 4-1 > < p > {{n}} {{s1}} = {{result}} {{s2}} < / p > < / div > <div id=fd-4-d v-model='r' > <p> {{r}}</p> </div> </div> </div> </div> <script> var app=new Vue({ el:'#app', Data :{select1:'1',//countryList id select2:'3', s1:'CNY', Sn1: 'yuan', / / the name of countryList sn2: 'the euro' v: "', the result:" ', r: ' ', the key: "', countryList: [{id: '1' key: 'CNY, name: 'CNY - yuan'}, {id: '2', the key: 'USD' name: '$USD -'}, {id: '3', the key: 'EUR, name:' the euro EUR - '}, {id: '4', the key: 'GBP, name:' GBP - pound '}, {id: '5' key: 'was' name:' JPY - yen}, {id: '6', the key: 'HKD, name:' Hong Kong dollars HKD - '}, {id: '7' key: 'AUD, name:' $AUD - '}, {id: '8', the key: 'CAD, name:' CAD - c},] and rates: New Map ([[" CNY ", 1], [" USD ", 0.1503], [" EUR ", 0.1266], [" GBP ", 0.1144], [" was ", 15.7243], [" HKD ", 1.1646], [" AUD ", ["CAD", 0.198],]),}, methods:{ count(){ this.s1=this.countryList[this.select1-1].key this.s2=this.countryList[this.select2-1].key this.sn1=this.countryList[this.select1-1].name.substring(6) this.sn2=this.countryList[this.select2-1].name.substring(6) this.r=this.rates.get(this.s2)/this.rates.get(this.s1) this.result=(this.v*this.r).toFixed(2) } }, }) </script> <style> #fd-f{ /*text-align: center; */ width: 100%; height: 100%; } #app{ width:500px; height: 415px; margin: auto; border: mediumblue 2px solid; border-radius: 8px; } #fd-h{ width: 500px; height: 50px; font-size: 32px; background-color: mediumblue; } #fd-1{ width: 500px; height: 50px; margin: 10px auto; font-size: 20px; } #fd-1-s{ height: 35px; width: 380px; border-radius: 8px; } #fd-2{ width: 500px; height: 50px; margin: 10px auto; font-size: 20px; } #fd-2-s{ height: 35px; width:380px; border-radius: 8px; } #fd-3{ width: 500px; height: 50px; margin: 10px auto; font-size: 20px; } #fd-3-i{ height: 30px; width: 280px; border-radius: 8px; } #fd-3-b{ width: 90px; height: 35px; background-color:blue; font-size: 18px; border-radius: 8px; } #fd-x{ border:none; border-top:1px dashed blue } #fd-4{ width: 500px; height: 80px; } #fd-4-1{ line-height: 20px; text-align: center; border: black 1px solid; font-size: 20px; margin-top: 5px; } #fd-4-d{ line-height: 10px; text-align: center; font-size: 20px; } </style> </body> </html>Copy the code