目录
- 实验目标:
- 源代码:
- 实验步骤讲解:
- 步骤一:先设计数据(==数据驱动视图==),设计数据与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
}
},
-
将其绑定在下面的“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自动计算相关金额
实验总结
- 时刻牢记“数据驱动视图”原理!要改变数据!!!
- 绑定方法时可以传参:
@click="toChange(index) - .toFixed(2) 保留两位小数
- cur[nowCountry.name][“EUR”] 这种形式可以找到对象中对应“键”的“值”
- v-for 循环渲染列表
- v-if
v-if是通过控制dom节点的存在与否来控制元素的显隐;
v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;