如何在VueJS中格式化数字

Vue.js

乐泡芙

2020-03-16

我找不到在VueJS中格式化数字的方法。我发现的只是内置的货币过滤器和用于格式化货币的vue-numeric，需要进行一些修改才能看起来像标签。然后，您将无法使用它来显示迭代的数组成员。

第1669篇《如何在VueJS中格式化数字》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
十三古一神奇 2020.03.16

Intl.NumberFormat()，默认用法：

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

//console -> 1 234 567

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

前端凯 2020.03.16

JavaScript为此提供了一个内置函数。

如果确定变量始终是Number而不是“ number String”，则可以执行以下操作：

{{ num.toLocaleString() }}

为了安全起见，请执行以下操作：

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

来源：https : //forum.vuejs.org/t/filter-numeric-with-comma/16002/2

乐米亚 2020.03.16

您可以随时尝试使用vue-numeral-filter。

乐泡芙 2020.03.16

安装digit.js：

npm install numeral --save

定义自定义过滤器：

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

用它： 

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android