如何在Vue组件中格式化货币？

samuel toh 发表于常见问题

塞缪尔·托

我的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组件中做到这一点？

Belmin Bedak

更新：我建议使用@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>

顺便说一句-我对替换和正则表达式没有太在意。可以改进。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, ',');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。