Javascript 如何在VueJS中格式化数字

我在VueJS中找不到格式化数字的方法。我所发现的只是用于格式化货币的and，需要进行一些修改，使其看起来像一个标签。然后您就不能使用它来显示迭代的数组成员。

安装：

定义自定义筛选器：

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

var数字=要求（“数字”）；
Vue.filter（“formatNumber”，函数（值）{
返回数字（值）。格式（“0,0”）；//可以显示其他分组/分隔符，请查看文档
});
导出默认值
{
...
} 

使用它：

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

{{item.integerValue | formatNumber}

Intl.NumberFormat（）

，默认用法：

...
created: function() {
    let number = 1234567;
    console.log(new Intl.NumberFormat().format(number))
},
...

//console -> 1 234 567

---

以防万一如果你真的想做一些简单的事情：

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

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

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

在

currency.js中

import {currency} from "@/currency";
Vue.filter('currency', currency)

const digitsRE = /(\d{3})(?=\d)/g

export function currency (value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

您也可以参考答案。
您可以尝试一下。
JavaScript有一个内置的函数

如果确定变量始终为数字，而不是“数字字符串”，则可以执行以下操作：

{{ num.toLocaleString() }}

如果您希望安全，请执行以下操作：

{{ Number(num).toLocaleString() }}

来源：
我来自智利，添加自定义格式。。。例如：50.000.000,56美元

安装npm安装数字--保存

之后添加格式自定义

Vue.filter('formatNumberMoney', function (value) {
  return numeral(value).format('0,0.')
   // displaying other groupings/separators is possible, look at the docs
})

试试这个。如果您使用的是vue.js 2

<template>
{{lowPrice | currency}}
</template>
<script>
data:(){
 return {lowPrice: 200}
}
filters:{
      currency(value) {
 return new Intl.NumberFormat("en-US",
 { style: "currency", currency: "USD" }).format(value);
 }
    }
</script>


{{低价|货币}
数据：（）{
返回{lowPrice:200}
}
过滤器：{
货币（价值）{
返回新的国际编号格式（“en US”，
{样式：“货币”，货币：“美元”}。格式（值）；
}
}

vue.js 3不再支持过滤器，因此您可以在computed中使用此逻辑


{{货币}
数据：（）{
返回{lowPrice:200}
}
计算：{
货币（）{
返回新的国际编号格式（“en US”，
{style:“currency”，currency:“USD”}）.format（this.lowPrice）；
}
}
将require移到筛选函数之外可能更好。@Cobaltway是的更好，但我们如何才能做到这一点？@FreddySidauruk已经完成了Vue2中没有内置的筛选。太棒了！而且也没有外部DEP！
import numeral from 'numeral'
// load a locale
numeral.register('locale', 'cl', {
  delimiters: {
    thousands: '.',
    decimal: ','
  },
  abbreviations: {
    thousand: 'm',
    million: 'M',
    billion: 'B',
    trillion: 'T'
  },
  ordinal: function (number) {
    return number === 1 ? 'er' : 'ème'
  },
  currency: {
    symbol: '$'
  }
})

// switch between locales
numeral.locale('cl')

Vue.filter('formatNumberMoney', function (value) {
  return numeral(value).format('0,0.')
   // displaying other groupings/separators is possible, look at the docs
})

<template>
{{lowPrice | currency}}
</template>
<script>
data:(){
 return {lowPrice: 200}
}
filters:{
      currency(value) {
 return new Intl.NumberFormat("en-US",
 { style: "currency", currency: "USD" }).format(value);
 }
    }
</script>

<template>
{{currency}}
</template>
<script>
data:(){
 return {lowPrice: 200}
}
computed:{
      currency() {
 return new Intl.NumberFormat("en-US",
 { style: "currency", currency: "USD" }).format(this.lowPrice);
 }
    }
</script>