vue小练习（网页汇率器）

您所在的位置：网站首页 › 汇率在线换算器在线使用 › vue小练习（网页汇率器）

vue小练习（网页汇率器）

2023-11-30 15:40| 来源: 网络整理| 查看: 265

一.重要的点 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) } }, })

【本文地址】

vue小练习（网页汇率器）

vue小练习（网页汇率器）

今日新闻

推荐新闻