web-dev-qa-db-fra.com

Comment formater les nombres dans VueJS

Je ne pouvais pas trouver un moyen de formater les nombres dans VueJS. Tout ce que j'ai trouvé, c'est le filtre monétaire builtin et le vue-numeric pour le formatage des devises, qui doivent être modifiés pour ressembler à une étiquette. Et ensuite, vous ne pouvez pas l'utiliser pour afficher des membres de tableau itérés.

javascriptvue.jsvuejs2
7
Buffalo

Installez numeral.js :

npm install numeral --save

Définissez le filtre personnalisé:

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

Utilise le: 

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

Compatibilité faible avec les navigateurs, mais néanmoins Intl.NumberFormat(), utilisation par défaut:

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

Juste au cas où si vous voulez vraiment faire quelque chose de simple:

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

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

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

Vous pouvez toujours essayer vue-numeral-filter .

1
user9993