UDN-企业互联网技术人气社区

板块导航

浏览  : 1237
回复  : 9

[资讯] 用vue实现简单实时汇率计算功能

[复制链接]
genie1003的头像 楼主
发表于 2017-2-9 10:48:45 | 显示全部楼层 |阅读模式
  最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试。

  第一步是搭好简单的Html结构
  1. <div id="demo">
  2.         <h1>汇率转换</h1>
  3.         <div class="moneyBox"><span>cny</span><input v-model="cny" type="text"><span>人民币¥</span></div>
  4.         <div class="moneyBox"><span>usd</span><input v-model="usd" type="text"><span>美元[        DISCUZ_CODE_0        ]lt;/span></div>
  5.         <div class="moneyBox"><span>hkd</span><input v-model="hkd" type="text"><span>港币[        DISCUZ_CODE_0        ]lt;/span></div>
  6.     </div>
复制代码

  整个页面的逻辑就是将三个币种的input都绑定一个model,v-model可以将这个数据传到后台,当任意一个输入框进行输入的时候会根据js已经写死的汇率计算出另外几种币种的数字。其中比较关键的是vue的computed的使用以及通过编写数据的get和set函数达到每个数据多项绑定的效果。另外值得一提的是我之前也使用了vue的 $watch来实现数据的实时计算,不过在双向绑定的实现中发现还是computed更加适用一些。
  1. var CNY_USD = 6.96;
  2.     var CNY_HKD = 0.90;
  3.     var data={    cny:'100',
  4.                 usd:'14.38'    ,
  5.                 hkd:'111.53',
  6.             };
  7.     var myVue = new Vue({
  8.       el: '#demo',
  9.       data: data,
  10.       computed: {
  11.           usd:{
  12.               get: function() {
  13.                   return (this.cny/CNY_USD).toFixed(2);
  14.               },
  15.               set: function(newValue) {
  16.                   this.cny = (newValue*CNY_USD).toFixed(2);
  17.               }
  18.           },
  19.           hkd:{
  20.               get: function() {
  21.                   return (this.cny/CNY_HKD).toFixed(2);
  22.               },
  23.               set: function(newValue) {
  24.                   this.cny = (newValue*CNY_HKD2Q).toFixed(2);
  25.               }
  26.           }
  27.       }
  28.      })
复制代码

  样式补充
  1. .moneyBox{
  2.             font-size: 20px;
  3.             font-family: "微软雅黑";
  4.         }
  5.         .moneyBox input{
  6.             width: 100px;
  7.             height: 24px;
  8.             padding: 0 10px;
  9.             margin: 0 10px;
  10.             border-radius: 5px;
  11.             border: 1px solid #333;
  12.         }
复制代码

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

  页面分享
1.png

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部