javascript - 使用 nuxtjs 渲染数字

Answer 1

您的答案在vue 自定义过滤器文档 中您可以仅将过滤器添加到您的组件，也可以全局定义它（可重用）

在 plugins 文件夹中创建 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
})

然后只需将它与小胡子|中的运算符一起使用，例如：

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

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

Answer 2

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

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

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

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

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