菜单 搜索
首页 前端知识 【Vue实验】实验一：设计并实现一个网页版的汇率计算器

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

2024-04-16 16:04:14 前端知识 前端哥 363 743 我要收藏

目录

    • 实验目标：
    • 源代码：
    • 实验步骤讲解：
      • 步骤一：先设计数据（==数据驱动视图==），设计数据与HTML的对应关系
      • 步骤二：实现“鼠标点击切换货币种类”的功能
      • 步骤三：实现“计算对应货币值”的功能
    • 实验结果截图
    • 实验总结

实验目标：

一、	实验目标：
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"]).toFixed(2)}}</span>
                <!-- <span v-if="item.name=='CNY'" v-for="(content,key) in countryList[index]">{{inputcount*cur["CNY"]["CNY"]}}</span> -->
 
            </li>
 
            <!-- <li @click="toChange"><span >HKD</span> <span>118.70</span></li>
                <li @click="toChange"><span >USD</span> <span>15.26</span></li>
                <li  @click="toChange"><span>EUR</span> <span>12.94</span></li> -->
        </ul>
 
        <p class="intro">鼠标点击可以切换货币种类</p>
 
        <!-- 遍历对象 -->
        <!-- <div v-for="(content,key) in nowCountry">{{key}}{{content}}</div> -->
 
    </div>
 
    <!-- 引入vue -->
    <script src="./node_modules/vue/dist/vue.js"></script>
 
    <!-- 逻辑 -->
    <script>
        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'] ;
            //     }
            // }
        })
    </script>
</body>
 
</html>
复制

实验步骤讲解：

步骤一：先设计数据（数据驱动视图），设计数据与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是用户可以更改的输入条

<li><span>{{nowCountry.name}}</span> <input  v-model="inputcount"></li>
复制

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

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

 <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"]).toFixed(2)}}</span>
                <!-- <span v-if="item.name=='CNY'" v-for="(content,key) in countryList[index]">{{inputcount*cur["CNY"]["CNY"]}}</span> -->
 
            </li>
复制

inputcount是用户可以更改的输入条

<li><span>{{nowCountry.name}}</span> <input  v-model="inputcount"></li>
复制

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

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

 <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"]).toFixed(2)}}</span>
                <!-- <span v-if="item.name=='CNY'" v-for="(content,key) in countryList[index]">{{inputcount*cur["CNY"]["CNY"]}}</span> -->
 
            </li>
复制

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

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

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

  1. 将其绑定在下面的“li”上，并传入当前对应countryList的下标【在方法里面写：在数据层面将this.nowCountry（当前显示在最上面的对应的数据条）与this.countryList[index] （当前点击的对应的数据条）进行调换】
    注：要改变数据！！！牢记“数据驱动视图”原理！

    		     <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"]).toFixed(2)}}</span>
    		         <!-- <span v-if="item.name=='CNY'" v-for="(content,key) in countryList[index]">{{inputcount*cur["CNY"]["CNY"]}}</span> -->
    		 
    		     </li>
    复制

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

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

  <span v-if="item.name=='JPY'">{{(inputcount*cur[nowCountry.name]["JPY"]).toFixed(2)}}</span>
 
当检测到当前遍历到的数据条是JPY的，就显示它的计算值
inputcount*cur[nowCountry.name]["JPY"]) 指：用上面用户输入的input乘上当前nowCountry.name对应的JPY的“汇率关系”【值*对应的汇率关系 等于 对应金额】
 
全部：
 <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"]).toFixed(2)}}</span>
                <!-- <span v-if="item.name=='CNY'" v-for="(content,key) in countryList[index]">{{inputcount*cur["CNY"]["CNY"]}}</span> -->
 
            </li>
 
复制

实验结果截图

初始状态:
在这里插入图片描述

点击切换货币种类：
在这里插入图片描述

改变input自动计算相关金额

在这里插入图片描述

实验总结

  1. 时刻牢记“数据驱动视图”原理！要改变数据！！！
  2. 绑定方法时可以传参：
    @click="toChange(index)
  3. .toFixed(2) 保留两位小数
  4. cur[nowCountry.name][“EUR”] 这种形式可以找到对象中对应“键”的“值”
  5. v-for 循环渲染列表
  6. v-if
    v-if是通过控制dom节点的存在与否来控制元素的显隐；
    v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
转载请注明出处或者链接地址：https://www.qianduange.cn//article/5036.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！