【Vue实验】实验一:设计并实现一个网页版的汇率计算器
目录
- 实验目标:
- 源代码:
- 实验步骤讲解:
- 步骤一:先设计数据(==数据驱动视图==),设计数据与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}}
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"]}} -->
inputcount是用户可以更改的输入条
- {{nowCountry.name}}
countryList数组存放货币种类
cur对象,汇率关系,里面存放了各种货币对应其他货币的汇率
其他货币用for循环输出视图:(每一栏都:包括货币名字和金额两部分)(金额那部分写了if判断,符合条件的就输出)
步骤二:实现“鼠标点击切换货币种类”的功能
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的“汇率关系”【值*对应的汇率关系 等于 对应金额】 全部:
实验结果截图
初始状态:
点击切换货币种类:
改变input自动计算相关金额
实验总结
- 时刻牢记“数据驱动视图”原理!要改变数据!!!
- 绑定方法时可以传参:
@click="toChange(index)
- .toFixed(2) 保留两位小数
- cur[nowCountry.name][“EUR”] 这种形式可以找到对象中对应“键”的“值”
- v-for 循环渲染列表
- v-if
v-if是通过控制dom节点的存在与否来控制元素的显隐;
v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...