Vueコンポーネントで通貨をフォーマットするにはどうすればよいですか？

私の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のコンポーネントではどうすればいいのでしょうか？

Mridang Agarwalla
編集された質問 4日 3月 2018 в 9:32
プログラミング
vue.js vuejs2 vue-component vuex
4日 4月 2017 в 1:01
まだビューはありません
質問へのコメント (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>

私はこれらの関連する回答を使用して、フィルターの実装を支援しました。

-https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-dollars-currency-string-in-javascript。 -https://stackoverflow.com/questions/1303646/check-whicher-variable-is-number-or-string-in-javascript。

解説 (6)
ソリューション

UPDATE: @Jessが提供するフィルター付きのソリューションを使用することを提案します。

そのためのメソッドを書いて、価格をフォーマットする必要があるところでは、テンプレートにメソッドを入れて、値を下に渡すだけです。

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

そして、テンプレートに


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

ちなみに、置換と正規表現については、あまり気を使っていませんので、改善されるかもしれません。

Belmin Bedak
編集した答え 27日 3月 2019 в 2:07
解説 (9)

vuejs 2を使用すると、他の利点があるvue2フィルターを使用することもできます。

{

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。

Machavity
編集した答え 30日 3月 2018 в 1:41
解説 (0)

独自のコードを作成して通貨をフォーマットできますが、それは今のところ単なる解決策です。アプリが成長するときに、他の通貨が必要になる場合があります。

これには別の問題があります。

1。 EN-usの場合-dolar記号は常に通貨の前にあります-$ 2.00、。 2。 選択したPLの場合、2,00złのような金額でサインを返します。

最良のオプションは、国際化のために複雑なソリューションを使用することだと思います。 ライブラリ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>

このプラグインは、翻訳や日付フォーマットなどのさまざまな機能も提供します。

Arkowsky
編集した答え 31日 7月 2018 в 9:02
解説 (0)

RoyJのコメントには、素晴らしい提案があります。テンプレートでは、ローカライズされた組み込みの文字列を使用すればよいのです：

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

古いブラウザではサポートされていないものもありますが、IE11以降をターゲットにしているのであれば、問題ないでしょう。

解説 (1)

@Jessが提案するカスタムフィルターソリューションを使用しましたが、私のプロジェクトでは、VueをTypeScriptと一緒に使用しています。 これは、TypeScriptとクラスデコレーターの場合の外観です。


コンポーネントを「vue-class-component」からインポートします。
'vue-class-decorator'から{Filter}をインポートします。

@コンポーネント。
デフォルトクラスのエクスポートホームはVue {を拡張します。

  @ Filter( 'toCurrency')。
  private toCurrency(value:number):string {。
    if(isNaN(値)){。
        戻る '';。
    }。

    var formatter = new Intl.NumberFormat( 'en-US'、{。
        スタイル:「通貨」、
        通貨:「USD」、
        minimumFractionDigits:0。
    });。
    formatter.format(value);を返します。
  }。
}。
``。
この例では、フィルターはコンポーネント内でのみ使用できます。 まだグローバルフィルターとして実装しようとはしていません。
解説 (0)

合格答案の精度に問題がある。

*このテストでは round(value, decimals) 関数が動作します。 単純なtoFixedの例とは異なります。

これは、toFixedとroundメソッドのテストです。

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

解説 (1)