使用 nuxtjs 渲染数字

Question

需要做的事情：

我想做这样的东西：

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
（只是格式编号）

谢谢！

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

Answer 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

中所述

使用 nuxtjs 渲染数字

Render number with nuxtjs

javascript

function

vuejs2

nuxt.js

v-model

需要做的事情：

示例（我的代码）：