Визуализировать номер с помощью 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, которая может быть решена с помощью toLocaleString метод чисел в JavaScript.

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. Вы можете добавить фильтр только к своему компоненту или определить его глобально (многократно).

Создайте файл js внутри папок плагинов и добавьте его в свои плагины внутри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>

Также вы можете передать некоторые аргументы вашей функции фильтра, как описано в документах.