如何格式化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 }}的结果是

  

26000000

但我希望格式化为：

  

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>

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

• How can I format numbers as dollars currency string in JavaScript?
• Check whether variable is number or string in JavaScript

Answer 2

  

更新：我建议使用@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>

BTW - 我并没有过多关注替换和正则表达。它可以改进。

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

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

此测试中的round（value，小数）函数有效。 与简单的toFixed示例不同。

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

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

spark.eventLog.enabled             false
spark.ui.enabled                   false
spark.acls.enable                  false
spark.admin.acls                   *
spark.modify.acls                  *
spark.modify.acls.groups           *
spark.ui.view.acls.groups          *
spark.ui.enabled                   false

mixin示例

  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);
  }

  // can anyone tell me why these are equivalent for  50.005, and 1050.005 through 8150.005 (increments of 50)

  var round_to = 2;
  var maxInt = 1500000;
  var equalRound = '<h1>BEGIN HERE</h1><div class="matches">';
  var increment = 50;
  var round_from = 0.005;
  var expected = 0.01;
  var lastWasMatch = true;

  for( var n = 0; n < maxInt; n=n+increment){
    var data = {};
    var numberCheck = parseFloat(n + round_from);
    data.original = numberCheck * 1;
    data.expected =  Number(n + expected) * 1;
    data.formatIt = Number(numberCheck).format(round_to) * 1;
    data.roundIt = round(numberCheck, round_to).toFixed(round_to) * 1;
    data.numberIt = Number(numberCheck).toFixed(round_to) * 1;
    //console.log(data);

    if( data.roundIt !== data.formatIt || data.formatIt !== data.numberIt ||
       data.roundIt !== data.numberIt || data.roundIt != data.expected
      ){
        if(lastWasMatch){
          equalRound = equalRound + '</div><div class="errors"> <hr/> Did Not Round UP <hr/>' ;
            document.write(' <h3>EXAMPLE: Did Not Round UP: ' + numberCheck + '</h3><br /><hr/> ');
            document.write('expected: '+data.expected + ' :: ' + (typeof data.expected)  + '<br />');
            document.write('format: '+data.formatIt + ' :: ' + (typeof data.formatIt)  + '<br />');
            document.write('round : '+data.roundIt + ' :: ' + (typeof data.roundIt)  + '<br />');
            document.write('number: '+data.numberIt + ' :: ' + (typeof data.numberIt)  + '<br />');
            lastWasMatch=false;
        }
        equalRound = equalRound + ', ' + numberCheck;
    } else {
        if(!lastWasMatch){
          equalRound = equalRound + '</div><div class="matches"> <hr/> All Rounded UP! <hr/>' ;
        } {
            lastWasMatch=true;
        }
        equalRound = equalRound + ', ' + numberCheck;
    }
  }
  document.write('equalRound: '+equalRound + '</div><br />');

Answer 8

您可以使用此示例

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

Answer 9

试试这个：

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

然后你可以这样称呼它：

{{ formatPrice(item.total) }}