Question

需要这样做：

我想做这样的事情：

1
10
100
1 000
10000
100 000
...

示例（我的代码）：

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

{{pops.Population}} 是数字和呈现方式： 96629€，我想要 96629€

但是我不明白如何使用nuxtjs做到这一点
（只需格式编号）

谢谢！

Answer 1

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

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

仅使用原始JavaScript，可以使用以下方法将数字转换为等价的货币。

您可以尝试将空间和货币符号分割并拼接到多个不同的场景中，这在短期内可能对您有用，但这显然不是持久的解决方案。我开始写一个只是为了意识到这是一个完整的难题，您也可以考虑使用一个更合适的JS库，例如accounting.js。

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

Answer 2

您的答案在vue custom filters documents内部您可以只向组件添加过滤器，也可以全局定义（可重用）

在插件文件夹中创建js文件，并将其添加到nuxt.config.js文件中的plugins内部。 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

中的说明将一些参数传递给过滤器函数

使用nuxtjs渲染编号

需要这样做：

示例（我的代码）：

2 个答案: