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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
比较完整的微信开发php代码
2016/08/02 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python中set()函数简介及实例解析
2018/01/09 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
体育教师求职信
2014/06/30 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
党支部书记岗位职责
2015/02/15 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript