it-swarm.com.de

So formatieren Sie Zahlen in VueJS

Ich habe in VueJS keine Möglichkeit gefunden, Zahlen zu formatieren. Alles, was ich fand, war der eingebaute Währungsfilter und vue-numeric zum Formatieren von Währungen. Und dann können Sie es nicht verwenden, um iterierte Array-Mitglieder anzuzeigen.

7
Buffalo

Installiere numeral.js :

npm install numeral --save  

Definieren Sie den benutzerdefinierten Filter:

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

Benutze es: 

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

Geringe Kompatibilität mit Browsern, aber trotzdem Intl.NumberFormat(), Standardverwendung:

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

6
Naskalin

Nur für den Fall, dass Sie wirklich etwas einfaches machen wollen:

<template>
  <div> {{ commission | toUSD }} </div>
</template>

<script>
export default {
  data () {
    return {
      commission: 123456
    }
  },

  filters: {
    toUSD (value) {
      return `$${value.toLocaleString()}`
    }
  }
}
</script>
2
Syed

Sie könnten immer vue-number-filter versuchen.

1
user9993