如何在 Vue 组件中格式化货币? [英] How do I format currencies in a Vue component?
问题描述
我的 Vue 组件是这样的:
<div><div class="panel-group"v-for="列表中的项目"><div class="col-md-8"><小>总计:<b>{{ item.total }}</b></小>
</模板><脚本>导出默认{...计算:{列表:函数(){返回 this.$store.state.transaction.list},...}}
{{ item.total }}
的结果是
26000000
但我想把它格式化成这样:
<块引用>26.000.000,00
在 jquery 或 javascript 中,我可以做到
但是,如何在 vue 组件中做到这一点?
更新:我建议使用由@Jess 提供的带有过滤器的解决方案.
我会为此编写一个方法,然后您可以在需要格式化价格的地方将该方法放入模板中并向下传递值
方法:{格式价格(价值){让 val = (value/1).toFixed(2).replace('.', ',')返回 val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}}
然后在模板中:
<div><div class="panel-group"v-for="列表中的项目"><div class="col-md-8"><小>总计:<b>{{ formatPrice(item.total) }}</b></小>