Javascript 如何在 VueJS 中格式化数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44538110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to format numbers in VueJS
提问by Buffalo
I couldn't find a way of formatting numbers in VueJS. All I found was the builtin currency filterand vue-numericfor formatting currencies, which needs some modification to look like a label. And then you can't use it for displaying iterated array members.
我找不到在 VueJS 中格式化数字的方法。我发现的只是用于格式化货币的内置货币过滤器和vue-numeric，需要进行一些修改才能看起来像标签。然后你不能用它来显示迭代的数组成员。
回答by Buffalo
Install numeral.js:
安装numeric.js：
npm install numeral --save
Define the custom 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>
Use it:
用它：
<tr v-for="(item, key, index) in tableRows">
<td>{{item.integerValue | formatNumber}}</td>
</tr>
回答by Naskalin
Intl.NumberFormat(), default usage:
Intl.NumberFormat(), 默认用法：
...
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
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
回答by Syed
Just in case if you really want to do something simple:
以防万一，如果你真的想做一些简单的事情：
<template>
<div> {{ commission | toUSD }} </div>
</template>
<script>
export default {
data () {
return {
commission: 123456
}
},
filters: {
toUSD (value) {
return `$${value.toLocaleString()}`
}
}
}
</script>
If you like to get bit more complicated then use thiscode or the code below:
如果您想变得更复杂，请使用此代码或以下代码：
in main.js
在 main.js
import {currency} from "@/currency";
Vue.filter('currency', currency)
in currency.js
在 currency.js
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, ',') +
_float
}
and in template:
并在template：
<div v-for="product in products">
{{product.price | currency}}
</div>
you can also refer answers here.
你也可以在这里参考答案。
回答by mafortis
JavaScript has a built-in function for this.
JavaScript 有一个内置函数。
If you're sure the variable is always Number and never a “number String”, you can do:
如果您确定变量始终是数字而不是“数字字符串”，则可以执行以下操作：
{{ num.toLocaleString() }}
If you want to be safe, do:
如果您想安全，请执行以下操作：
{{ Number(num).toLocaleString() }}
Source: https://forum.vuejs.org/t/filter-numeric-with-comma/16002/2
来源：https: //forum.vuejs.org/t/filter-numeric-with-comma/16002/2
回答by user9993
You could always give vue-numeral-filtera try.
你可以随时尝试vue-numeral-filter。
