vue小练习（网页汇率器）

最新推荐文章于 2023-11-01 18:19:19 发布

Mikeylllllll

最新推荐文章于 2023-11-01 18:19:19 发布

阅读量423

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Mikeylllllll/article/details/128033734

版权

一.重要的点：

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)。

四.代码

css:
#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;
}

vue和网页结构：

<!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>
<link rel="stylesheet" href="网页汇率.css">
<body>
<div id="fd-f">
<div id='app'>
<div id='fd-h'>
汇率查询转换器
</div>
<div id='fd-1'>
持有货币：

<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>

<script src="/vue.js"></script>
<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>

</body>
</html>