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代码
Jul 01 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JQuery球队选择实例
2015/05/18 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python numpy存取文件的方式
2020/04/01 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
班级安全教育实施方案
2014/02/23 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
如何写好自荐信
2014/04/07 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
车辆委托书范本
2014/10/05 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
离职报告格式
2014/11/04 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
三十年同学聚会感言
2015/07/30 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript