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

燕zzzz

已于 2023-04-06 21:31:33 修改

阅读量3.2k

点赞数 10

分类专栏： Vue实验文章标签： vue.js 前端 javascript

于 2023-04-06 21:30:58 首次发布

本文链接：https://blog.csdn.net/m0_63233563/article/details/129999487

版权

实验目标：

一、	实验目标：
1.1	 掌握vue中数据绑定、事件交互等基础语法，深刻理解vue的核心思想； 
二、	实验条件：
2.1 硬件条件：CPU:i3处理器以上，内存4G以上，硬盘：128G以上
2.2 软件条件：VSCode、Google浏览器
三、	实验内容：
学习完Vue的基础知识之后，设计并实现一个网页版的汇率计算器，可以实现人民币、美元、港币、欧元、日元的相互兑换。大致功能如下：
1、引入vue.js框架后，定义一个json保存货币之间的汇率；
2、 通过点击鼠标切换需要兑换的币种；
3、利用监听器的方式监听币种的变化，从而根据定义的汇率计算。
4、 其它你想到的能尽量使得页面看起来美观。

源代码：

<!DOCTYPE html>
<html lang="en">

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

<!-- 样式 -->
<style>
    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;
    }
</style>

</head>

<body>
    <!-- 结构 -->
    <div id="app">
        <p class="title">汇率计算器</p>
        <ul>
            <li><span>{
  {nowCountry.name}}</span> <input  v-model="inputcount"></li>


            <li v-for="(item,index) in countryList" @click="toChange(index)"><span>{
  {item.name}}</span>
                <span v-if="item.name=='CNY'">{
  {(inputcount*cur[nowCountry.name]["CNY"]).toFixed(2)}}</span>
                <span v-if="item.name=='JPY'">{
  {(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}}</span>
                <span v-if="item.name=='HKD'">{
  {(inputcount*cur[nowCountry.name]["HKD"]).toFixed(2)}}</span>
                <span v-if="item.name=='USD'">{
  {(inputcount*cur[nowCountry.name]["USD"]).toFixed(2)}}</span>
                <span v-if="item.name=='EUR'">{
  {(inputcount*cur[nowCountry.name]["EUR