介绍为什么要使用vue & lt; div id=癲emo"比;
,,,& lt; h2>汇率转换& lt;/h2>
,,,& lt; div 类=癿oneyBox"祝辞& lt; span> cny & lt; input v模型=癱ny",类型=皌ext"祝辞& lt; span>人民币￥& lt;/span> & lt;/div>
,,,& lt; div 类=癿oneyBox"祝辞& lt; span> usd & lt; input v模型=皍sd",类型=皌ext"祝辞& lt; span>美元& lt;美元/span> & lt;/div>
,,,& lt; div 类=癿oneyBox"祝辞& lt; span> hkd & lt; input v模型=癶kd",类型=皌ext"祝辞& lt; span>港币$ & lt;/span> & lt;/div>
& lt;才能/div> var CNY_USD =, 6.96;
var 才能;CNY_HKD =, 0.90;
var 才能;数据={元才能:& # 39;100 & # 39;,
,,,,,,,美元:& # 39;14.38 & # 39;,,,
,,,,,,,港币:& # 39;111.53 & # 39;
,,,,,};
var 才能;myVue =, Vue ({new
,,,el: & # 39; #演示# 39;
,,,数据:数据,
,才能计算:{
,,,,美元:{
,,,,,,得到:,()函数,{
,,,,,,,,return (this.cny/CNY_USD) .toFixed (2);
,,,,,,},
,,,,,,:,函数(newValue), {
,,,,,,,,this.cny =, (newValue * CNY_USD) .toFixed (2);
,,,,,,}
,,,,},
,,,,港币:{
,,,,,,得到:,()函数,{
,,,,,,,,return (this.cny/CNY_HKD) .toFixed (2);
,,,,,,},
,,,,,,:,函数(newValue), {
,,,,,,,,this.cny =, (newValue * CNY_HKD2Q) .toFixed (2);
,,,,,,}
,,,,}
,,}
,,}) .moneyBox {
,,,,,,字体大小:20 px;
,,,,,字体类型:,“微软雅黑“;
,,,}
,,,输入{.moneyBox
,,,,,宽度:,100 px;
,,,,,身高:,24 px;
,,,,,填充:,0,10 px;
,,,,,保证金:,0,10 px;
,,,,,这个特性:,5 px;
,,,,,边界:,1 px solid # 333;
,,,}
这篇文章将为大家详细讲解有关vue怎么实现实时汇率计算功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个演示入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试。
1,第一步是搭好简单的HTML结构
2,整个页面的逻辑就是将三个币种的输入都绑定一个模型中,v模型可以将这个数据传到后台,当任意一个输入框进行输入的时候会根据js已经写死的汇率计算出另外几种币种的数字。其中比较关键的是vue的计算的使用以及通过编写数据的获取和设置函数达到每个数据多项绑定的效果。另外值得一提的是我之前也使用了美元vue的手表来实现数据的实时计算,不过在双向绑定的实现中发现还是计算更加适用一些。
3样式补充
因为目的也只是为了写一个小演示,所以简单做了一个样式,让页面看起来没那么别扭,等有时间了再优化一下页面的用户体验再尝试一下直接调用汇率api的数据来实现计算。
页面分享
关于“vue怎么实现实时汇率计算功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
