标签：Vue name height 汇率 width fd key 转换器 id
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。