函数:

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货币格式化函数的更多相关文章

  1. 【转载】vue.js实现格式化时间并每秒更新显示功能示例

    引用:https://www.jb51.net/article/143351.htm 这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于 ...

  2. js 日期格式化函数(可自定义)

    js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...

  3. js时间格式化函数,支持Unix时间戳

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  5. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  6. JS 时间格式化函数

    //时间格式化函数 Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, ...

  7. JS日期格式化函数性能优化篇

    最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间.于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力.对线上一些代码进行了评测,以下是一 ...

  8. js 数值格式化函数

    function ForDight(Dight,How){ ,How))/Math.pow(,How); return Dight; } //ForDight(Dight,How):数值格式化函数; ...

  9. js 日期格式化函数

    直接上代码: // 日期格式化函数 // yyyy/MM/dd hh:mm:ss SSS ⇒ "2017/05/16 09:24:20 850" //"yyyy/M/d ...

随机推荐

  1. STL 智能指针

    转自: https://blog.csdn.net/k346k346/article/details/81478223 STL一共给我们提供了四种智能指针:auto_ptr.unique_ptr.sh ...

  2. RTL8201EL介绍【转】

    转自:https://blog.csdn.net/Firefly_cjd/article/details/79826698 本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  3. 用vue+element-ui开发后台笔记

    1.前端通过 formData: new FormData(), 构造对象传数值给后台! 当传给后台的参数中有图片的时候,需要把需要传输的数据通过构造对象new FormData()的形式存数据,并且 ...

  4. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  5. python3+selenium框架设计05-配置文件和浏览器引擎类

    python3配置文件的增删改查等操作可以使用内置的ConfigParser模块,可以自行百度学习,也可以看Python3学习笔记27-ConfigParser模块 配置文件一般存放着环境信息,比如u ...

  6. 《转》return *this和 return this有什么区别?

    别跟我说 return *this 表示返回当前对象,return this 表示返回当前对象的地址(指向当前对象的指针). 正确答案为:return *this 返回的是当前对象的克隆或者本身(若返 ...

  7. SIFT+BOW 实现图像检索

    原文地址:https://blog.csdn.net/silence2015/article/details/77374910 本文概述 图像检索是图像研究领域中一个重要的话题,广泛应用于医学,电子商 ...

  8. webp 图形文件操作工具包 win32 (编译 libwebp-20171228-664c21dd 版本)

    源码下载地址     https://chromium.googlesource.com/webm/libwebp/ 版本                   libwebp-20171228-664 ...

  9. cryptsetup文件系统加密

    今天做了SYC攻防题的文件系统挂载部分,在找到挂载最内层的final文件时发现mount无法识别,这也许就是一个加密的文件系统吧,还好-在龟速的 网络环境下查阅到了losetup循环挂载系统命令,但是 ...

  10. QPainter

    1.QPainter使用save()函数来保存QPainter的状态,并且用restore()函数来使他们回退. void MainWindow::paintEvent(QPaintEvent *ev ...