如何在vue-i18n中显示带小数和不带小数的货币
如何在vue-i18n中显示带小数和不带小数的货币
提问于 2017-12-30 04:51:36
使用以下配置，我可以输出带有货币的金额
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>以下格式在某些情况下可能很好用，但如果我需要输出简单的数量，如:10 5、10 10等。我不能。我试图配置它，但没有成功。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-30 13:58:40
vue-i18n docs指示数字格式可以包括Intl.NumberFormat options，因此您可以将minimumFractionDigits和maximumFractionDigits选项都设置为零，以便从货币中删除小数部分。
您可以定义一个使用以下选项的新命名格式(例如，"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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48028314
复制相关文章
相似问题
腾讯云开发者
