当前位置：首页 > 行业知识 > 【Vue实验】实验一：设计并实现一个网页版的汇率计算器

行业知识

【Vue实验】实验一：设计并实现一个网页版的汇率计算器

2026-11-14 08:28:34 来源：互联网转载

- 实验目标：
- 源代码：
- 实验步骤讲解：
- - 步骤一：先设计数据（==数据驱动视图==），设计数据与HTML的对应关系
  - 步骤二：实现“鼠标点击切换货币种类”的功能
  - 步骤三：实现“计算对应货币值”的功能
  - 实验结果截图
  - 实验总结
    实验目标：
```
一、实验目标：1.1 掌握vue中数据绑定、事件交互等基础语法，深刻理解vue的核心思想； 二、实验条件：2.1 硬件条件：CPU:i3处理器以上，内存4G以上，硬盘：128G以上2.2 软件条件：VSCode、Google浏览器三、实验内容：学习完Vue的基础知识之后，设计并实现一个网页版的汇率计算器，可以实现人民币、美元、港币、欧元、日元的相互兑换。大致功能如下：1、引入vue.js框架后，定义一个json保存货币之间的汇率；2、 通过点击鼠标切换需要兑换的币种；3、利用监听器的方式监听币种的变化，从而根据定义的汇率计算。4、 其它你想到的能尽量使得页面看起来美观。
```
    源代码：
```
汇率计算器    p.title {        text-align: center;        font-size: 18px;        margin: 30px 0 10px 0;    }    p.intro {        text-align: center;        font-size: 14px;    }    ul {        margin: 0 auto;        width: 200px;        list-style-type: none;        border: 2px solid #999;        border-radius: 10px;        padding: 0;        font-size: 16px;        font-weight: bold;        font-family: 'Courier New', Courier, monospace;    }    li {        padding: 10px;    }    li:first-child {        display: flex;        border-bottom: 2px solid #999;    }    li:not(:first-child):hover {        background-color: #ddd;    }    span {        cursor: default;    }    span:last-child {        float: right;    }    input {        text-align: right;        border: none;        font-size: 16px;        width: 100px;        margin-left: auto;        font-weight: bold;        font-family: 'Courier New', Courier, monospace;        outline: none;        border-bottom: 1px solid #000;    }                汇率计算器
        
```
    - {{nowCountry.name}}
    - {{item.name}} {{(inputcount*cur[nowCountry.name]["CNY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["HKD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["USD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["EUR"]).toFixed(2)}} {inputcount*cur["CNY"]["CNY"]}} -->
    鼠标点击可以切换货币种类
    {key}}{{content}} --> new Vue({ el: '#app', data: { inputcount: 100, // nowCountryName:"CNY", nowCountry: { name: 'CNY' }, countryList: [ // { id: '1', key: 'CNY', name: 'CNY',num:100}, { name: 'JPY' }, { name: 'HKD' }, { name: 'USD' }, { name: 'EUR' } ], // 汇率关系 cur: { 'CNY': { 'CNY': 1, 'JPY': 16.8760, 'HKD': 1.1870, 'USD': 0.1526, 'EUR': 0.1294 }, 'JPY': { 'CNY': 0.052, 'JPY': 1, 'HKD': 0.06, 'USD': 0.007635, 'EUR': 0.007 }, 'HKD': { 'CNY': 0.875, 'JPY': 16.686, 'HKD': 1, 'USD': 0.127, 'EUR': 0.118}, 'USD': { 'CNY': 6.868, 'JPY': 130.938, 'HKD': 7.846, 'USD': 1, 'EUR': 0.922 }, 'EUR': { 'CNY': 7.446, 'JPY': 141.972, 'HKD': 8.508, 'USD': 1.084, 'EUR': 1 } }, }, methods: { // 切换货币种类 toChange(index) { // 把当前点击id的对应数据跟nowCountry互换 // console.log(index) let t = this.nowCountry this.nowCountry = this.countryList[index] this.countryList[index] = t } } // watch: { // nowCountry(newValue, oldValue) { // this.nowCountry.name = newValue['name'] ; // } // } })
    实验步骤讲解：
    
    步骤一：先设计数据（数据驱动视图），设计数据与HTML的对应关系
```
data: {                inputcount: 100,                // nowCountryName:"CNY",                nowCountry: { name: 'CNY' },                               countryList: [                    // { id: '1', key: 'CNY', name: 'CNY',num:100},                    {  name: 'JPY' },                    {  name: 'HKD' },                    {  name: 'USD' },                    {  name: 'EUR' }                ],                // 汇率关系                cur: {                    'CNY': { 'CNY': 1, 'JPY': 16.8760, 'HKD': 1.1870, 'USD': 0.1526, 'EUR': 0.1294 },                    'JPY': { 'CNY': 0.052, 'JPY': 1, 'HKD': 0.06, 'USD': 0.007635, 'EUR': 0.007 },                    'HKD': { 'CNY': 0.875, 'JPY': 16.686, 'HKD': 1, 'USD': 0.127, 'EUR': 0.118},                    'USD': { 'CNY': 6.868, 'JPY': 130.938, 'HKD': 7.846, 'USD': 1, 'EUR': 0.922 },                    'EUR': { 'CNY': 7.446, 'JPY': 141.972, 'HKD': 8.508, 'USD': 1.084, 'EUR': 1 }                                    },            },
```
    nowCountry是最上面的那条数据
    inputcount是用户可以更改的输入条
  - {{nowCountry.name}}
```
 
```
- {{item.name}} {{(inputcount*cur[nowCountry.name]["CNY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["HKD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["USD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["EUR"]).toFixed(2)}} {inputcount*cur["CNY"]["CNY"]}} -->
{{nowCountry.name}}

countryList数组存放货币种类

cur对象，汇率关系，里面存放了各种货币对应其他货币的汇率

其他货币用for循环输出视图：（每一栏都：包括货币名字和金额两部分）（金额那部分写了if判断，符合条件的就输出）

{{item.name}} {{(inputcount*cur[nowCountry.name]["CNY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["HKD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["USD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["EUR"]).toFixed(2)}} {inputcount*cur["CNY"]["CNY"]}} -->

步骤二：实现“鼠标点击切换货币种类”的功能

1.定义“切换货币种类”的方法：

methods: {

            // 切换货币种类            toChange(index) {                // 把当前点击id的对应数据跟nowCountry互换                // console.log(index)                let t = this.nowCountry                this.nowCountry = this.countryList[index]                this.countryList[index] = t            }        },

将其绑定在下面的“li”上，并传入当前对应countryList的下标【在方法里面写：在数据层面将this.nowCountry（当前显示在最上面的对应的数据条）与this.countryList[index] （当前点击的对应的数据条）进行调换】
注：要改变数据！！！牢记“数据驱动视图”原理！
```
     
```
{{item.name}} {{(inputcount*cur[nowCountry.name]["CNY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["HKD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["USD"]).toFixed(2)}} {{(inputcount*cur[nowCountry.name]["EUR"]).toFixed(2)}} {inputcount*cur["CNY"]["CNY"]}} -->

步骤三：实现“计算对应货币值”的功能

在li里面的“金额”部分进行判断显示。当检测到当前数据条的name是哪个，就对应显示哪个的计算金额结果

如：

  {{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}}当检测到当前遍历到的数据条是JPY的，就显示它的计算值inputcount*cur[nowCountry.name]["JPY"]) 指：用上面用户输入的input乘上当前nowCountry.name对应的JPY的“汇率关系”【值*对应的汇率关系 等于 对应金额】全部：