如何在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