最近在自己摸索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的数据来实现计算。

  4. 页面分享

    

    

用vue实现简单实时汇率计算功能的更多相关文章

  1. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  2. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  3. 使用node+vue实现简单的WebSocket聊天功能

    最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧, 首先, ...

  4. 用Vue开发一个实时性时间转换功能,看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

  5. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. Storm分布式实时流计算框架相关技术总结

    Storm分布式实时流计算框架相关技术总结 Storm作为一个开源的分布式实时流计算框架,其内部实现使用了一些常用的技术,这里是对这些技术及其在Storm中作用的概括介绍.以此为基础,后续再深入了解S ...

  7. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  8. .Spark Streaming(上)--实时流计算Spark Streaming原理介

    Spark入门实战系列--7.Spark Streaming(上)--实时流计算Spark Streaming原理介绍 http://www.cnblogs.com/shishanyuan/p/474 ...

  9. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

随机推荐

  1. PHP 3:从Login界面谈PHP标记

    原文:PHP 3:从Login界面谈PHP标记 前一篇文章简要介绍了此实例.OK,我们就从第一个页面Login页面入手吧.还是看看界面怎么样,是不是很想指导它到底是如何实现的呢?好的,看看其代码吧: ...

  2. 在vi中使用perltidy格式化perl代码

    格式优美的perl代码不但让人赏心悦目,并且能够方便阅读. perltidy的是sourceforge的一个小项目,在我们写完乱七八糟的代码后,他能像变魔术一样把代码整理得漂美丽亮,快来体验一下吧!! ...

  3. 2.3 LINQ查询表达式中 使用select子句 指定目标数据

    本篇讲解LINQ查询的三种形式: 查询对象 自定义查询对象某个属性 查询匿名类型结果 [1.查询结果返回集合元素] 在LINQ查询中,select子句和from子句都是必备子句.LINQ查询表达式必须 ...

  4. 编译安装gimp插件之Mathmap(流水记录)

    本文为在Fedora 20下编译安装Mathmap1.3.5的编译过程,如果你仅仅需要快速的安装Mathmap,那么请拉至文末的"快速安装" 其实,过程还是很有趣的,充满Error ...

  5. 有return如果是try catch finally运行命令

    背景: 昨天一个朋友出去采访,遇到这样的问题:"C#  catch那里return.finally也弄它运行?" 个人总结实践: 1.无论有木有出现异常.finally块中代码都会 ...

  6. 使用 Visual C# .NET 生成 Office COM 外接程序

    Microsoft Office XP 和 Microsoft Office 2003 都支持一种新的统一的设计结构,这种结构用于生成应用程序外接程序以增强和控制 Office 应用程序.这些外接程序 ...

  7. Eclipse在SVN安装步骤(两种)和使用方法

    一.至Eclipse安装SVN,最常见的两种方式:手动模式,使用安装向导.具体操作步骤如下: 单程:手动安装 1.官方网站下载,从site-1.6.9.zip文件,网址是:subclipse.tigr ...

  8. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  9. c#winform关闭窗口时触发的事件

    用户关闭软件时,软件一般会给“是否确认关闭”的提示. 通常,我们把它写在FormClosing 事件中,如果确定关闭,就关闭:否则把FormClosingEventArgs 的 Cancel 属性设置 ...

  10. CODEFORCES#274 DIV2

    A[傻逼题] 大意:给你a,b,c三个数,你可以在其中加上括号,加号,乘号,使得到的值最大 就是问你 a+b+c,a*(b+c),(a+b)*c,a*b*c,(a+c)*b 哪个最大! 我去...这不 ...