使用 nuxtjs 渲染数字答案

【问题标题】：Render number with nuxtjs使用 nuxtjs 渲染数字
【发布时间】：2018-12-24 19:27:01
【问题描述】：

需要做的：

我想做这样的事情：

1
10
100
1 000
10 000
100 000
...

示例（我的代码）：

<div class="boxe-chiffre" v-if="pops.Population"><span>Population</span> {{pops.Population}}</div>

{{pops.Population}} 是数字并像这样呈现：96629€ 我想要 96 629€

但我不明白如何使用 nuxtjs
（只是格式化数字）

谢谢！

【问题讨论】：

您是专门寻找货币格式还是只是一种分隔数字的方法？

标签： javascript function vuejs2 nuxt.js v-model

【解决方案1】：

这并不是一个 nuxtJS 问题，它只是一个基本的 JavaScript 问题，可以使用 JavaScript 中的数字 toLocaleString 方法解决。

methods: {
  toCurrencyString(number){
    return number.toLocaleString('en-UK', { style: 'currency', currency: 'EUR' })
  }
}

以下方法可用于仅使用原生 JavaScript 将数字转换为其货币等值。

您可以尝试将空格和货币符号拆分和拼接到多个不同的场景中，这可能在短期内对您有用，但这显然不是一个持久的解决方案。我开始写一个只是意识到这是一个完整的兔子洞，你也可以看看使用 JS 库，比如accounting.js，它可能更合适。

这是一个展示如何实现组件的 js fiddle：https://jsfiddle.net/eywraw8t/177932/

【讨论】：

感谢您的回答，但我的主要问题是如何在数据上使用 javascript 函数
您可能应该删除该答案，因为它不是一个，您需要将 toCurrencyString 方法添加到组件中的方法对象中。之后您可以拨打{{toCurrencyString(pops.Population)}}

【解决方案2】：

你的答案在vue custom filters documents里面您可以仅将过滤器添加到您的组件中，也可以全局定义它（可重用）

在插件文件夹中创建 js 文件并将其添加到 plugins 中的 nuxt.config.js 文件中。 import Vue from 'vue' 然后使用 Vue.filter() 函数定义您的自定义过滤器

import Vue from 'vue'
Vue.filter('currency', function (value) {
  // tanks @li-x for his simple formating function
  return value.toLocaleString('en-UK', { style: 'currency', currency: 'EUR' })
  // you can add something like .replace(/,/g, ' ') after toLocaleString method to customize your formatted number
})

然后只需在mustache 中将其与| 运算符一起使用即可：

<div class="boxe-chiffre" v-if="pops.Population"><span>Population</span> {{pops.Population | currency}}</div>

您还可以将一些参数传递给您的过滤器函数，如documents 中所描述的那样

【讨论】：