vue实现简单实时汇率计算功能


Posted in Javascript onJanuary 15, 2017

最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试。

1、第一步是搭好简单的Html结构

<div id="demo">
    <h1>汇率转换</h1>
    <div class="moneyBox"><span>cny</span><input v-model="cny" type="text"><span>人民币¥</span></div>
    <div class="moneyBox"><span>usd</span><input v-model="usd" type="text"><span>美元$</span></div>
    <div class="moneyBox"><span>hkd</span><input v-model="hkd" type="text"><span>港币$</span></div>
  </div>

2、整个页面的逻辑就是将三个币种的input都绑定一个model,v-model可以将这个数据传到后台,当任意一个输入框进行输入的时候会根据js已经写死的汇率计算出另外几种币种的数字。其中比较关键的是vue的computed的使用以及通过编写数据的get和set函数达到每个数据多项绑定的效果。另外值得一提的是我之前也使用了vue的 $watch来实现数据的实时计算,不过在双向绑定的实现中发现还是computed更加适用一些。

var CNY_USD = 6.96;
  var CNY_HKD = 0.90;
  var data={  cny:'100',
        usd:'14.38'  ,
        hkd:'111.53',
      };
  var myVue = new Vue({
   el: '#demo',
   data: data,
   computed: {
     usd:{
       get: function() {
         return (this.cny/CNY_USD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_USD).toFixed(2);
       }
     },
     hkd:{
       get: function() {
         return (this.cny/CNY_HKD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_HKD2Q).toFixed(2);
       }
     }
   }
   })

3、样式补充

.moneyBox{
      font-size: 20px;
      font-family: "微软雅黑";
    }
    .moneyBox input{
      width: 100px;
      height: 24px;
      padding: 0 10px;
      margin: 0 10px;
      border-radius: 5px;
      border: 1px solid #333;
    }

因为目的也只是为了写一个小demo,所以简单做了一个样式,让页面看起来没那么别扭,等有时间了再优化一下页面的用户体验再尝试一下直接调用汇率api的数据来实现计算。

页面分享

vue实现简单实时汇率计算功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析URI与URL之间的区别与联系
Nov 22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue+moment实现倒计时效果
Aug 26 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
JS轮播图中缓动函数的封装
Nov 25 #Javascript
JavaScript字符串对象
Jan 14 #Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 #Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 #Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 #Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JS的反射问题
2010/04/07 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
大学生自我鉴定书
2014/03/24 职场文书
农村门前三包责任书
2014/07/25 职场文书
中秋节活动总结
2014/08/29 职场文书
男方婚礼答谢词
2015/01/20 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript