vue实现金额过滤功能

vue过滤器

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
}

局部注册

div class="item-total">
  Item total: 
  <span class="total-price">{{totalPrice | currency('$')}}</span>
</div>

import { currency } from '../util/currency'
export default{
  // 过滤器
  // 这里面可以定义很多个过滤器
  filters: {
    currency: currency
  },
}

全局注册

main.js

import { currency } from './util/currency'

Vue.filter('currency', currency)

在自己想要用的组件直接就使用