如何格式化Vue组件中的货币？

Question

我的Vue组件是这样的:

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

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

结果{{ item.total }}是

2600

但我希望格式化如下:

26.000.000,00

在jquery或javascript中,我可以做到

但是,如何在vue组件中执行此操作？

Answer 1

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

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

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

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

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

• 如何在JavaScript中将数字格式化为美元货币字符串？
• 检查变量是否为JavaScript中的数字或字符串

Answer 2

我会为此编写方法,然后您需要格式化价格,您可以将方法放在模板中并传递值

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>

顺便说一句 - 我没有太在意替换和正则表达.它可以改进.

Answer 3

使用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

Answer 4

您可以格式化货币编写自己的代码,但它只是当下的解决方案 - 当您的应用程序增长时,您可以需要其他货币.

这还有另一个问题:

1. 对于EN-us - dolar标志总是在货币之前 - $ 2.00,
2. 对于选定的PL,您将返回2,00zł之后的符号.

我认为最好的选择是使用复杂的国际化解决方案,例如library 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,00zł:

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

此插件还提供不同的功能,如翻译和日期格式.

Answer 5

@RoyJ的评论提出了很好的建议.在模板中,您可以使用内置的本地化字符串:

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

某些较旧的浏览器不支持它,但如果您的目标是IE 11及更高版本,那么您应该没问题.

Answer 6

我使用了@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);
  }
}

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

Answer 7

尝试这个：

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

然后你可以这样称呼它：

{{ formatPrice(item.total) }}