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

vue.js Vue.js

猪猪蛋蛋

2020-03-10

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

第499篇《如何在Vue组件中格式化货币?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
番长西里神无 2020.03.10

@RoyJ的评论有很好的建议。在模板中,您可以只使用内置的本地化字符串:

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

某些较旧的浏览器不支持此功能,但是如果您以IE 11及更高版本为目标,则应该可以。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android