Vue2实现汇率兑换器(通过mounted初始化汇率json到本地,ElementUI实现下拉框)

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

货币汇率换算工具

数据来源：中国银行外汇牌价，信息最后更新时间：{{timeFormat}}

---

---

---

利用 ":" 实现参数数据向视图层的单向响应式绑定，同时通过 v-model 实现表单元素与数据之间的双向绑定机制。

在组件的 mounted 钩子函数中，通过 axios 发起 GET 请求加载 data.json 文件，获取货币相关数据，并将返回结果赋值给实例中的 currencys 数组，完成初始化操作。

[
    {
      "name":"USD/CNY",
      "nameDesc":"美元/人民币",
      "from":"USD",
      "fromName":"美元",
      "to":"CNY",
      "toName":"人民币",
      "price":"7.2202"
    },
    {
      "name":"EUR/CNY",
      "nameDesc":"欧元/人民币",
      "from":"EUR",
      "fromName":"欧元",
      "to":"CNY",
      "toName":"人民币",
      "price":"7.7936"
    },
    {
      "name":"JPY/CNY",
      "nameDesc":"日元/人民币",
      "from":"JPY",
      "fromName":"日元",
      "to":"CNY",
      "toName":"人民币",
      "price":"0.0477"
    }
  ]

当用户在界面中选择买入或卖出的货币类型时，watch 监听器会自动检测 buySelected 与 saleSelected 的变化，遍历 currencys 数据列表，匹配对应的货币名称（fromName），并更新相应的汇率值（buyRate 或 saleRate）。

计算属性 buyTotal 和 saleTotal 分别根据输入金额（buy、sale）与当前汇率的乘积，动态计算出兑换后的总额，实现自动换算功能。例如，在第二个文本框中输入买入金额后，第四个文本框将实时显示折算结果。

另外，timeFormat 计算属性用于生成当前时间的格式化字符串，包括年、月、日、时、分、秒，格式为 "YYYY-MM-DD HH:MM:SS"，可用于展示数据更新的时间戳。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Element json NTU MEN TED