Wie man Zahlen in VueJS formatiert

Question

Ich konnte einen Weg zur Formatierung von Zahlen in VueJS nicht finden. Alles, was ich fand, war die builtin currency filter und vue-numeric zum Formatieren von Währungen, die einige Änderungen benötigt, um wie ein Etikett aussehen. Und dann können Sie es nicht zum Anzeigen iterierter Array-Elemente verwenden.

Answer 1

installieren numeral.js:

npm install numeral --save 

den benutzerdefinierten Filter definieren:

<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> 

es verwenden:

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

Answer 2

Low Kompatibilität mit Browsern, aber dennoch Intl.NumberFormat(), Standard Nutzung:

... 
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