vue-i18n에서 십진수 및 십진수 없이 통화를 표시하려면 어떻게 해야 합니다.

vue-i18n에서 십진수 및 십진수 없이 통화를 표시하려면 어떻게 해야 합니다.

다음 구성에서 통화로 금액을 출력할 수 있습니다.

const numberFormats = {
    "en-GB": {
        currency: {
            style: 'currency', currency: 'GBP'
        }
    },
    "en-US": {
        currency: {
            style: 'currency', currency: 'USD'
        }
    }
}

컴포넌트 내부

<p>{{ $n(100.20, 'currency') }}</p>

출력 가능:

<p>£100.20</p>

경우에 따라서는 다음과 같은 포맷이 좋을 수 있지만, £5, £10 etc 등 간단한 금액을 출력해야 하는 경우.나는 못한다.설정하려고 했지만 실패했어요.

그vue-i18n docs는 숫자 형식에 옵션을 포함할 수 있으므로minimumFractionDigits그리고.maximumFractionDigits통화에서 소수점 부분을 제거하려면 두 옵션을 모두 0으로 설정합니다.

다음 옵션을 사용하는 새로운 명명 형식(예: "currencyNoCents")을 정의할 수 있습니다.

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD'
    },
    currencyNoCents: {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0, // set fraction digits to 0 to remove cents
      maximumFractionDigits: 0
    }
  },
  'en-GB': {
    currency: {
      style: 'currency', currency: 'GBP'
    },
    currencyNoCents: {
      style: 'currency',
      currency: 'GBP',
      minimumFractionDigits: 0, // set fraction digits to 0 to remove cents
      maximumFractionDigits: 0
    }
  },
}

const i18n = new VueI18n({
  locale: 'en-GB',
  numberFormats
})

new Vue({
  i18n
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="app">
  <p>{{ $n(100.20, 'currency') }}</p>
  <p>{{ $n(100.20, 'currencyNoCents') }}</p>
</div>

언급URL : https://stackoverflow.com/questions/48028314/how-can-i-display-currency-with-decimal-and-without-it-in-vue-i18n