用vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试。
- 第一步是搭好简单的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>
- <div id="demo">
- 整个页面的逻辑就是将三个币种的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);
- }
- }
- }
- })
- var CNY_USD = 6.96;
- 样式补充
- .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的数据来实现计算。
- .moneyBox{
- 页面分享
用vue实现简单实时汇率计算功能的更多相关文章
- 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视
都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- 使用node+vue实现简单的WebSocket聊天功能
最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧, 首先, ...
- 用Vue开发一个实时性时间转换功能,看这篇文章就够了
前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Storm分布式实时流计算框架相关技术总结
Storm分布式实时流计算框架相关技术总结 Storm作为一个开源的分布式实时流计算框架,其内部实现使用了一些常用的技术,这里是对这些技术及其在Storm中作用的概括介绍.以此为基础,后续再深入了解S ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- .Spark Streaming(上)--实时流计算Spark Streaming原理介
Spark入门实战系列--7.Spark Streaming(上)--实时流计算Spark Streaming原理介绍 http://www.cnblogs.com/shishanyuan/p/474 ...
- 沉淀,再出发:VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
随机推荐
- Fluent Validation
.NET业务实体类验证组件Fluent Validation 认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真 ...
- NCache实现Oracle数据与分布式缓存数据同步的3个步骤
多层次结构的应用程序是目前发展的趋势,这种程序都需要庞大的数据库支持.而数据传输的能力直接影响程序性能,成为程序可扩展性的瓶颈.因此很多开发者开始在程序中使用内存分布式缓存来提高程序性能. 同时,内存 ...
- 安装Visual Source Safe 2005 - 初学者系列 - 学习者系列文章
本文介绍微软的文档管理工具Visual Source Safe 2005的安装 从下列地址获取该工具: ed2k://|file|en_vss_2005.iso|108048384|C4BEC1EC3 ...
- 【转】GitHub 优秀的 Android 开源项目
转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...
- sqlclr创建表值函数案例
----------------------------------------------:定义表值类型:(1.一定返回的是IEnumerable2.一定带参数3.一定有FillRowMethodN ...
- Android控件RecyclerView与ListView的异同
在我的一篇介绍Android新控件RecyclerView的博客(Android L新控件RecyclerView简介)中,一个读者留言说RecyclerView跟ListView之间好像没有什么不同 ...
- Toad for Oracle的安装
分享一下Oracle 10gToad for Oracle的安装步骤 三年前用过Oracle,单纯的“用过”,主要就是说对数据库的一些操作,还不包含创建一些存储过程之类的,所以对Oracle仅仅只 ...
- 并行Linq(一)
.Net 并行计算 ----并行Linq(一) 本文是.Net 并行计算 的第三篇 欢迎大家拍砖,阅读本文需要有LINQ基础,因为并行LINQ (PLinq) 其实是LINQ To Object 的并 ...
- WebSocket在ASP.NET MVC4中的简单实现
WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...
- 《cracking the coding intreview》——链表
前言 最近准备暑假回家回家修整一下,所以时间大部分用来完成项目上的工作,同时为了9月份的校招,晚上的时间我还在学习<cracking the coding intreview>,第二章链表 ...