How to format numbers in thousands, million or billions in vue.js?

Question

like this: 12000 = 12k , 1000000 = 1m , 1430 = 1.4k ,

 <div v-for="item in items" :key:"item">
   <span>{{item.num}}</span>
</div>

<script lang='ts'>

  items:any[]=[
     {num:"122256879"},
     {num:"12000000"},
     {num:"1430"},
  ]

</script>

Does this answer your question? [Format a number as 2.5K if a thousand or more, otherwise 900](https://stackoverflow.com/questions/9461621/format-a-number-as-2-5k-if-a-thousand-or-more-otherwise-900) — Spatz, Jan 07 '20 at 14:34

score 1 · Accepted Answer · answered Jan 07 '20 at 14:41

I found two npm packages that seem to do the trick:

https://www.npmjs.com/package/number-shortener

This first one doesn't seem very widely used, but looking at the code it's very lightweight.

The second is:

https://www.npmjs.com/package/number-abbreviate

More popular and also very lightweight. I guess read and play around to see which one suits you better.

depperm · Answer 2 · 2020-01-07T15:21:09.847

Create a filter (inside main.js)

Vue.filter('formatNumber', (value) => {
  ending=['k','m','b','t']
  if(n.length<4){
    return n;
  }else{
    return `${n[0]}${n[1]!='0'?`.${n[1]}`:''}${ending[Math.floor((n.length-1)/3)-1]}`;
  }
})

for numbers greater than or equal 1000 (length of 4) you return the first digit n[0] and then if the next digit n[1] isn't 0 include that with a .. The ending/postfix is based on the original length.

and then from your code

<div v-for="item in items" :key:"item">
   <span>{{item.num | formatNumber}}</span>
</div>

How to format numbers in thousands, million or billions in vue.js?

2 Answers2