我创建了一个过滤器。过滤器可以在任何页面中使用。

Vue.filter('toCurrency', function (value) {
    if (typeof value !== "number") {
        return value;
    }
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    });
    return formatter.format(value);
});

然后我可以像这样使用这个过滤器：

        <td class="text-right">
            {{ invoice.fees | toCurrency }}
        </td>

我使用这些相关答案来帮助实现过滤器：

如何将数字格式化为货币字符串

在 JavaScript 中检查变量是数字还是字符串

更新：我建议使用@Jess 提供的带有过滤器的解决方案。

我会为此编写一个方法，然后在您需要格式化价格的地方，您可以将该方法放在模板中并向下传递值

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
}

然后在模板中：

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

顺便说一句 - 我并没有太在意替换和正则表达式。它可以改进。enter code here

Vue.filter('tableCurrency', num => { if (!num) { return '0.00'; } const number = (num / 1).toFixed(2).replace(',', '.'); return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); });

使用 vuejs 2，您可以使用 vue2-filters，它也有其他好东西。

npm install vue2-filters


import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

然后像这样使用它：

{{ amount | currency }} // 12345 => $12,345.00

参考：https://www.npmjs.com/package/vue2-filters

您可以编写自己的代码来格式化货币，但这只是目前的解决方案 - 当您的应用程序增长时，您可能需要其他货币。

这还有另一个问题：

对于 EN-us - 美元符号总是在货币之前 - 2.00 美元，对于选定的 PL，您在 2,00 zł 之后返回符号。

我认为最好的选择是使用复杂的国际化解决方案，例如库 vue-i18n(http://kazupon.github.io/vue-i18n/)。

我使用这个插件，我不必担心这样的事情。请查看文档 - 这真的很简单：

http://kazupon.github.io/vue-i18n/guide/number.html

所以你只需使用：

<div id="app">
  <p>{{ $n(100, 'currency') }}</p>
</div>

并设置 EN-us 以获得 100.00 美元：

<div id="app">
  <p>$100.00</p>
</div>

或将 PL 设置为 100,00 zł：

<div id="app">
  <p>100,00 zł</p>
</div>

该插件还提供不同的功能，如翻译和日期格式。

@RoyJ 的评论有一个很好的建议。在模板中，您可以只使用内置的本地化字符串：

<small>
     Total: <b>{{ item.total.toLocaleString() }}</b>
</small>

一些较旧的浏览器不支持它，但如果你的目标是 IE 11 及更高版本，你应该没问题。

我使用了@Jess 提出的自定义过滤器解决方案，但在我的项目中，我们将 Vue 与 TypeScript 一起使用。这就是 TypeScript 和类装饰器的样子：

import Component from 'vue-class-component';
import { Filter } from 'vue-class-decorator';

@Component
export default class Home extends Vue {

  @Filter('toCurrency')
  private toCurrency(value: number): string {
    if (isNaN(value)) {
        return '';
    }

    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
  }
}

在此示例中，过滤器只能在组件内部使用。我还没有尝试将它实现为全局过滤器。

你可以使用这个例子

formatPrice(value) {
  return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
},

接受答案的准确性存在问题。

此测试中的 round(value, decimals) 函数有效。不像简单的 toFixed 例子。

这是对 toFixed vs round 方法的测试。

http://www.jacklmoore.com/notes/rounding-in-javascript/

Number.prototype.format = function(n) { return this.toFixed(Math.max(0, ~~n)); }; function round(value, decimals) { return Number(Math.round(value+'e'+decimals)+'e-'+decimals); } // 谁能告诉我为什么这些等价于 50.005 和 1050.005 到 8150.005（增量为 50） var round_to = 2; var maxInt = 1500000; var equalRound = '

从这里开始

混合示例

导出默认{方法：{roundFormat：函数（值，小数）{返回数字（Math.round（值+'e'+小数）+'e-'+小数）.toFixed（小数）； }, currencyFormat: function (value, decimals, symbol='$') { return symbol + this.roundFormat(value,2); } } }

尝试这个：

methods: {
    formatPrice(value) {
        var formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'PHP',
            minimumFractionDigits: 2
        });
        return formatter.format(value);
    },
}

然后你可以这样称呼它：

{{ formatPrice(item.total) }}

numeral.js 是一个用于格式化和操作数字的 JavaScript 库。

您可以使用它轻松格式化货币。

例如，

// price = 1200
{numeral(price).format(`$0,0.00`)}

// result $1,200.00

这是文档。 http://numeraljs.com/