[vue.js] Vue 구성 요소에서 통화 형식을 어떻게 지정합니까?

Question 1

내 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 구성 요소에서 어떻게 수행합니까?

Question 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-대체 및 정규 표현식에 너무 신경 쓰지 않았습니다. 개선 될 수 있습니다.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, ',');
});

스 니펫 확장

Question 3

필터를 만들었습니다. 필터는 모든 페이지에서 사용할 수 있습니다.

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>

필터 구현을 돕기 위해 다음과 같은 관련 답변을 사용했습니다.

Question 4

vuejs 2에서는 다른 장점도있는 vue2-filter를 사용할 수 있습니다.

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

Question 5

고유 한 코드를 작성하는 통화의 형식을 지정할 수 있지만 현재로서는 그저 해결책 일뿐입니다. 앱이 커질 때 다른 통화가 필요할 수 있습니다.

이것에 또 다른 문제가 있습니다.

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>

이 플러그인은 번역 및 날짜 형식과 같은 다양한 기능도 제공합니다.

Question 6

@RoyJ의 의견에는 큰 제안이 있습니다. 템플릿에서 내장 된 현지화 된 문자열을 사용할 수 있습니다.

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

일부 구형 브라우저에서는 지원되지 않지만 IE 11 이상을 대상으로하는 경우 괜찮습니다.

Question 7

@Jess가 제안한 사용자 지정 필터 솔루션을 사용했지만 프로젝트에서는 TypeScript와 함께 Vue를 사용하고 있습니다. 이것은 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);
  }
}

이 예에서 필터는 구성 요소 내에서만 사용할 수 있습니다. 아직 전역 필터로 구현하려고 시도하지 않았습니다.

Question 8

이 예를 사용할 수 있습니다.

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