Vue.js货币格式化函数
函数:
const digitsRE = /(\d{3})(?=\d)/g export function currency (value, currency, decimals) {
value = parseFloat(value)
if (!isFinite(value) || (!value && value !== 0)) return ''
currency = currency != null ? currency : '$'
decimals = decimals != null ? decimals : 2
var stringified = Math.abs(value).toFixed(decimals)
var _int = decimals
? stringified.slice(0, -1 - decimals)
: stringified
var i = _int.length % 3
var head = i > 0
? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
: ''
var _float = decimals
? stringified.slice(-1 - decimals)
: ''
var sign = value < 0 ? '-' : ''
return sign + currency + head +
_int.slice(i).replace(digitsRE, '$1,') +
_float
}
引入:
import {currency} from './../util/currency'
定义局部过滤器:
filters:{
currency:currency
},
使用:
<div class="item-total">
Item total: <span class="total-price">{{totalPrice|currency('$')}}</span>
</div>
全局过滤器:在main.js
import {currency} from './util/currency'
Vue.filter("currency",currency);
使用:
<div class="cart-tab-4">
<div class="item-price-total">{{(item.productNum*item.salePrice)|currency('$')}}</div>
</div>
效果:
Vue.js货币格式化函数的更多相关文章
- 【转载】vue.js实现格式化时间并每秒更新显示功能示例
引用:https://www.jb51.net/article/143351.htm 这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于 ...
- js 日期格式化函数(可自定义)
js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...
- js时间格式化函数,支持Unix时间戳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
- angular.js和vue.js中实现函数去抖(debounce)
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
- JS 时间格式化函数
//时间格式化函数 Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, ...
- JS日期格式化函数性能优化篇
最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间.于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力.对线上一些代码进行了评测,以下是一 ...
- js 数值格式化函数
function ForDight(Dight,How){ ,How))/Math.pow(,How); return Dight; } //ForDight(Dight,How):数值格式化函数; ...
- js 日期格式化函数
直接上代码: // 日期格式化函数 // yyyy/MM/dd hh:mm:ss SSS ⇒ "2017/05/16 09:24:20 850" //"yyyy/M/d ...
随机推荐
- 在Linux环境下使用Apache部署ASP.NET Core
在前几篇文章中我们一起探讨了如何在Linux环境中安装ASP.NET Core运行时环境及将ASP.NET Core项目部署在Jexus中,这篇文章中我们将探讨如何将ASP.NET Core部署于Ap ...
- 关于iframe的相关操作
1.判断当前页面是否在iframe当中 if (top.location != self.location) { alert("in iframe") }
- 设计模式C++学习笔记之九(Template Method模板方法模式)
模板模式也是相当简单的一种模式,而且是比较常用的.模板模式是定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些 ...
- 题解-CTSC2012 熟悉的文章
Problem bzoj 题目大意:给定多个标准串和一个文本串,全部为01串,如果一个串长度不少于\(L\)且是任意一个标准串的子串,那么它是"熟悉"的.对于文本串\(A\),把\ ...
- SharePoint 2013: Workflow Manager Backend 服务意外地终止
一.环境:SharePoint 2013 + Workflow Manager 1.0 二.错误描述: Workflow Manager Backend 服务意外地终止,这种情况已经出现了 42106 ...
- ACM Computer Factory POJ - 3436 网络流拆点+路径还原
http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...
- button 去掉原生边框
button按钮触发 hover 时,自带边框会显示,尤其是 button 设置圆角时,如图: 解决办法: outline: 0;
- 021_supervise进行管理利器
一.公司的类似ansible的工具也是用supervise管理的 [admin@mjyall-test-1 /service/ansible-oc-agent]$ ps -ef|grep 19070 ...
- Light OJ 1116
基础数学:.. #include<bits/stdc++.h> using namespace std; typedef unsigned long long ULL; int main( ...
- Dnsmasq加速本地DNS请求
文章目录 Dnsmasq安装 Dnsmasq配置 Dnsmasq启动 Dnsmasq使用 Dnsmasq小结 默认的情况下,我们平时上网用的本地DNS服务器都是使用电信或者联通的,但是这样也导致了 ...