私の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のコンポーネントではどうすればいいのでしょうか?
フィルターを作成しました。 フィルターはどのページでも使用できます。
{
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。
UPDATE: @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>
ちなみに、置換と正規表現については、あまり気を使っていませんので、改善されるかもしれません。
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
独自のコードを作成して通貨をフォーマットできますが、それは今のところ単なる解決策です。アプリが成長するときに、他の通貨が必要になる場合があります。
これには別の問題があります。
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>
このプラグインは、翻訳や日付フォーマットなどのさまざまな機能も提供します。
@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);を返します。
}。
}。
``。
この例では、フィルターはコンポーネント内でのみ使用できます。 まだグローバルフィルターとして実装しようとはしていません。
合格答案の精度に問題がある。
*このテストでは round(value, decimals) 関数が動作します。 単純なtoFixedの例とは異なります。