vue小练习（网页汇率器） |
您所在的位置：网站首页 › 人民币美元汇率转换代码 › vue小练习（网页汇率器） |
|
一.重要的点
1.数据绑定
2.@change和 @click 的运用
3.不同类型数据之间的关联
页面：
整体比较简单，上中下三个 div，上面的 div 里就放一个文本就行；中间的 div 又分为三个小 div，每个 div 里一个文本加一个输入框；下面的 div 也分为三个小 div 逻辑主要就是实现数据的获取，计算，展示： 两个数据关联的是对象数组的key和map里的key,但是两组数据需要的值不同。 这个 select 绑定的就是 option 的 value 属性的值， 所以把 option 的 value 换成对象数组里id, vue和网页结构： 汇率兑换 汇率查询转换器 持有货币： {select}} --> {{c.name}} 目标货币： {{c.name}} 兑换金额： {{sn1}}兑换{{sn2}}:{{v}} {{s1}} = {{result}}{{s2}} 当前汇率：{{r}} var app=new Vue({ el:'#app', data:{ select1:'1',//countryList中的id select2:'3', s1:'CNY',//countryList中的key s2:'EUR', sn1:'人民币',//countryList中的name sn2:'欧元', v:'', result:'', r:'', key:'', countryList:[ { id: '1', key: 'CNY', name: 'CNY - 人民币'}, { id: '2', key: 'USD', name: 'USD - 美元' }, { id: '3', key: 'EUR', name: 'EUR - 欧元' }, { id: '4', key: 'GBP', name: 'GBP - 英镑' }, { id: '5', key: 'JPY', name: 'JPY - 日元' }, { id: '6', key: 'HKD', name: 'HKD - 港币' }, { id: '7', key: 'AUD', name: 'AUD - 澳元' }, { id: '8', key: 'CAD', name: 'CAD - 加元' }, ], rates: 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], ]), }, 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) } }, }) |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |