Vue实现简单汇率转换器
作者：互联网
Vue实现简单汇率转换器
一.重要的点：
1.数据绑定
select 里绑定 option 的 value 属性值
2.@change和 @click 的运用
动态展示及数据处理
3.不同类型数据之间的关联
对象数组和 Map
数据：
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],
],
二.效果：
1.初始页面
大致的轮廓和内容如下：
2.动态效果
在select的下拉框里选择的时候点击之后页面要动态响应
3.结果页面
输入兑换金额，点击查询计算，在下面显示计算结果
三.分析：
1.页面：
整体比较简单，上中下三个 div，上面的 div 里就放一个文本就行；中间的 div 又分为三个小 div，每个 div 里一个文本加一个输入框；下面的 div 也分为三个小 div,如上所示。
2.逻辑：
主要就是实现数据的获取，计算，展示：
两个数据关联的是对象数组的key和map里的key,但是两组数据需要的值不同。
这个 select 绑定的就是 option 的 value 属性的值，
所以把 option 的 value 换成对象数组里id,
可以通过id获得对象数组里的其他属性的值,
this.对象数组名[id].属性名 这样可以得到对象数组的key和name;
之后通过key获得map里的value值进行运算 this.map名.get(key)。
四.代码：
如下是本人实现效果所写的代码，新手，样式很简陋，主要是理解页面逻辑！
<!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>汇率兑换</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="fd-f">
<div id='app'>
<div id='fd-h'>
汇率查询转换器
</div>
<div id='fd-1'>
持有货币：
<!-- {{select}} -->
<select id='fd-1-s' v-model="select1" @change="count" >
<option v-for="c in countryList" :key="c.id" :value="c.id">
{{c.name}}
</option>
</select>
</div>
<div id='fd-2'>
目标货币：
<select id='fd-2-s' v-model="select2" @change="count">
<option v-for="c in countryList" :key="c.id" :value="c.id">
{{c.name}}
</option>
</select>
</div>
<div id='fd-3'>
兑换金额：
<input id='fd-3-i' type="text" v-model="v" />
<input id='fd-3-b' type="button" @click="count" value="查询计算">
</div>
<hr id='fd-x'>
<div id='fd-4'>
<div id='fd-4-w'>{{sn1}}兑换{{sn2}}:</div>
<div id='fd-4-m'>
<p id='fd-4-1'>{{v}} {{s1}} = {{result}}{{s2}}</p>
<hr id='fd-4-r'>
<div id=fd-4-d v-model='r' >
<p>当前汇率：{{r}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- 两个数据关联的是对象数组的key和map里的key,但是两组数据需要的值不同。
这个select绑定的就是option的value属性的值，所以把option的value换成对象数组里的id,
可以通过id获得对象数组里的其他属性的值（this.对象数组名[id].属性名）这样可以得到对象数组的key和name;
之后通过key获得map里的value值进行运算（this.map名.get(key)）-->
<script>
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)
}
},
})
</script>
<style>
#fd-f{
/*text-align: center;*/
width: 100%;
height: 100%;
}
#app{
width:500px;
height: 415px;
margin: auto;
border: cornflowerblue 2px solid;
border-radius: 8px;
}
#fd-h{
width: 500px;
height: 50px;
font-size: 32px;
background-color: cornflowerblue;
}
#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:cornflowerblue;
font-size: 18px;
border-radius: 8px;
}
#fd-x{
border:none;
border-top:1px dashed blue;
width: 480px;
}
#fd-4{
width: 500px;
height: 80px;
}
#fd-4-w{
color:cornflowerblue;
font-size: 20px;
font-weight: 400;
line-height: 35px;
}
#fd-4-m{
height: 100px;
width: 490px;
border: cornflowerblue 1px solid;
border-radius: 10px;
margin: 10px auto;
text-align: center;
font-size: 20px;
}
#fd-4-1{
line-height: 20px;
text-align: center;
font-size: 20px;
}
#fd-4-d{
line-height: 10px;
text-align: center;
font-size: 18px;
color:cornflowerblue;
}
</style>
</body>
</html>
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：Vue,name,height,汇率,width,fd,key,转换器,id 来源： https://blog.csdn.net/liuhandi/article/details/119244911