vue小练习（网页汇率器）

原创于 2022-11-24 18:54:33 发布 · 445 阅读

CC 4.0 BY-SA版权

文章标签：

该博客介绍了一个使用Vue.js编写的汇率查询转换器。页面包含持有货币、目标货币选择及兑换金额输入，通过变更选择项触发计算。数据绑定到select和input组件，利用v-model和@change事件实现数据交互。计算过程中，根据对象数组的id获取对应的汇率，结合Map对象进行转换率计算。最终显示转换结果。

一.重要的点

1.数据绑定

2.@change和 @click 的运用

3.不同类型数据之间的关联

页面：

整体比较简单，上中下三个 div，上面的 div 里就放一个文本就行；中间的 div 又分为三个小 div，每个 div 里一个文本加一个输入框；下面的 div 也分为三个小 div

逻辑

主要就是实现数据的获取，计算，展示：
两个数据关联的是对象数组的key和map里的key,但是两组数据需要的值不同。
这个 select 绑定的就是 option 的 value 属性的值，
所以把 option 的 value 换成对象数组里id,

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