如何在VueJS中格式化数字

Question

我无法在VueJS中找到格式化数字的方法。我发现的所有内容都是格式化货币的builtin currency filter和vue-numeric，需要修改才能看起来像一个标签。然后你不能用它来显示迭代的数组成员。

Answer 1

安装numeral.js：

npm install numeral --save 

定义自定义过滤器：

<script> 
    var numeral = require("numeral"); 

    Vue.filter("formatNumber", function (value) { 
    return numeral(value).format("0,0"); // displaying other groupings/separators is possible, look at the docs 
    }); 

    export default 
    { 
    ... 
    } 
</script> 

使用它：

<tr v-for="(item, key, index) in tableRows"> 
    <td>{{item.integerValue | formatNumber}}</td> 
</tr> 

Answer 2

低兼容的浏览器，但仍然Intl.NumberFormat()，默认情况下使用：

... 
created: function() { 
    let number = 1234567; 
    console.log(new Intl.NumberFormat().format(number)) 
}, 
... 

//console -> 1 234 567 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat