VueJS实现一个货币结算自定义控件
Vue.component('currency-input', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
v-on:blur="formatValue"\
>\
</div>\
',
props: {
value: {
type: Number,
default: 0
},
label: {
type: String,
default: ''
}
},
mounted: function () {
this.formatValue()
},
methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value, this.value)
if (result.warning) {
this.$refs.input.value = result.value
}
this.$emit('input', result.value)
},
formatValue: function () {
this.$refs.input.value = currencyValidator.format(this.value)
},
selectAll: function (event) {
// Workaround for Safari bug
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
setTimeout(function () {
event.target.select()
}, 0)
}
}
}) new Vue({
el: '#app',
data: {
price: 0,
shipping: 0,
handling: 0,
discount: 0
},
computed: {
total: function () {
return ((
this.price * 100 +
this.shipping * 100 +
this.handling * 100 -
this.discount * 100
) / 100).toFixed(2)
}
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script> <div id="app">
<currency-input
label="Price"
v-model="price"
></currency-input>
<currency-input
label="Shipping"
v-model="shipping"
></currency-input>
<currency-input
label="Handling"
v-model="handling"
></currency-input>
<currency-input
label="Discount"
v-model="discount"
></currency-input> <p>Total: ${{ total }}</p>
</div>
VueJS实现一个货币结算自定义控件的更多相关文章
- 用VUEJS做一个网易云音乐
前言:自己学习VUEJS也一段时间,但一直没有做出来一东西.我自己一直喜欢用网易云音乐app,于是乎就做了这个app. 项目截图 技术栈 vue全家桶 (vue vue-router vuex) ax ...
- 用vuejs实现一个todolist项目
用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...
- 用VUEJS做一个猫眼电影web app
之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...
- 使用vuejs做一个todolist
在输入框内输入一个list,回车,添加到list列表中,点击列表中的项样式改变 1.index.html <!DOCTYPE html> <html> <head> ...
- vue-实现一个购物车结算页面
这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用 如果实在一个页面中的兄弟组件,可以使用$emit和$on 中间件,eventBus.js 放在components目录下面 ...
- 楼市、股市后下一届ZF将用什么去做超发货币的蓄水池(
这是天涯论坛上最近的的一个热帖合集,周小川曾直言超发货币需要蓄水池来装,以控制通货膨胀.这个蓄水池楼市做过.股市曾经也充当过,或许现在的地下钱庄也算一部分吧,那下一届政府会如何选择这个蓄水池呢,这或将 ...
- day01_人类社会货币的演变
1.货币的自然演变 1.1:从实物货币(贝壳.金银等一般等价物的稀有性等价于被交换物品的价值)---纸质货币(国家信用背书,使得一文不值的纸币可以兑换价值百元的商品)---记账货币(微信.二维码.银行 ...
- 一起来学习Android自定义控件2-简单的写字板控件
概述 上一篇文章我们对自定义控件进行了一个大体的知识介绍.今天就来学习自定义一个简单的写字板控件. 先来看看效果图 就是简单的根据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了android官方 ...
- Analyzer中进行货币转换
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
随机推荐
- Ubuntu 不支持 rpm
不是第一次犯这个错误了. 记一下. 每次安装jdk 的时候,习惯性下载rpm包. 然后的,然后在 ubuntu上rpm 安装的时候就跪了.. ubuntu需要使用Alien 把rpm 转成 deb再安 ...
- jsp想js,action传值
1.struts2 action如何向JSP的JS函数传值 action中定义变量 public class TestAction extends ActionSupport implements S ...
- 浅谈EL
一.了解EL 1.EL是从 JavaScript 脚本语言得到启发的一种表达式语言,它借鉴了 JavaScript 多类型转换无关性的特点.在使用 EL 从 scope 中得到参数时可以自动转换类型, ...
- 用ListView实现对数据库的内容显示
用ListView实现对数据库的内容显示 创建一个触发机制 ---------(作用)将数据读入ArrayList集合中 MyBase base = new MyBase(); SQLiteDatab ...
- 深度学习实践系列(1)- 从零搭建notMNIST逻辑回归模型
MNIST 被喻为深度学习中的Hello World示例,由Yann LeCun等大神组织收集的一个手写数字的数据集,有60000个训练集和10000个验证集,是个非常适合初学者入门的训练集.这个网站 ...
- golang mutex互斥锁分析
互斥锁:没有读锁写锁之分,同一时刻,只能有一个gorutine获取一把锁 数据结构设计: type Mutex struct { state int32 // 将一个32位整数拆分为 当前阻塞的gor ...
- DLL:无法解析的外部符号 "__declspec(dllimport)
(4.10)碰到问题:MFC规则DLL(静态库1)中,AFX_EXT_CLASS导出类及类的对象.在静态库2中使用.出现两个问题: (1) 静态库1中警告:dll链接不一致; (2) 静态库2中报 ...
- Android中查看布局文件中的控件(view,id)在哪里被调用(使用)
在阅读别人的代码时通常是很痛苦的,有时很想要看一看布局中的控件在哪里被调用了,为之很苦恼 在这里提供一种方法. 复制要查看的控件ID,到R文件中搜索到该ID, 接下来就好办的了,选中ID按下C ...
- 打印时鼠标键盘移动的div创建
function createDiv(id, label, offset_left, offset_top) { $("body").append($("<div& ...
- AE + GDAL实现影像按标准图幅分割(下)
在上篇实现了遥感影像的切割,本篇讲切割前的准备.主要分为以下几步: (1)将影像的投影坐标转换为地理坐标,以便于之后的图幅划分.AE坐标转换函数如下 private bool Proj2Geo(ISp ...