Ответ 1

Я бы написал метод для этого, а затем, где вам нужно отформатировать цену, вы можете просто поместить метод в шаблон и передать значение вниз

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
}

А потом в шаблоне:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

Кстати, я не слишком заботился о замене и регулярном выражении. Это можно улучшить.

РЕДАКТИРОВАТЬ: Я предлагаю использовать решение с фильтрами, предоставленными @Jess.

Ответ 2

Я создал фильтр. Фильтр можно использовать на любой странице.

Vue.filter('toCurrency', function (value) {
    if (typeof value !== "number") {
        return value;
    }
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
});

Затем я могу использовать этот фильтр следующим образом:

        <td class="text-right">
            {{ invoice.fees | toCurrency}}
        </td>

Я использовал эти связанные ответы, чтобы помочь с реализацией фильтра:

• Как я могу форматировать числа в виде строки валюты доллара в JavaScript?
• Проверьте, является ли переменная числом или строкой в ​​JavaScript

Ответ 3

С vuejs 2 вы можете использовать фильтры vue2, у которых есть и другие плюсы.

npm install vue2-filters


import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

Тогда используйте это так:

{{ amount | currency }} // 12345 => $12,345.00

Ссылка: https://www.npmjs.com/package/vue2-filters

Ответ 4

Комментарий от @RoyJ имеет большое предложение. В шаблоне вы можете просто использовать встроенные локализованные строки:

<small>
     Total: <b>{{ item.total.toLocaleString() }}</b>
</small>

Он не поддерживается в некоторых старых браузерах, но если вы настраиваете таргетинг на IE 11 и более поздние версии, вы должны быть в порядке.

Ответ 5

Вы можете отформатировать валюту, написав свой собственный код, но на данный момент это просто решение - когда ваше приложение будет расти, вам могут понадобиться другие валюты.

Есть еще одна проблема с этим:

1. Для EN-us - знак доллара всегда перед валютой - $ 2,00,
2. Для выбранного PL вы возвращаете знак после суммы, как 2,00 злотых.

Я думаю, что лучший вариант - использовать комплексное решение для интернационализации, например, библиотека vue-i18n (http://kazupon.github.io/vue-i18n/).

Я использую этот плагин, и мне не нужно беспокоиться о таких вещах. Пожалуйста, посмотрите на документацию - это действительно просто:

http://kazupon.github.io/vue-i18n/guide/number.html

так что вы просто используете:

<div id="app">
  <p>{{ $n(100, 'currency') }}</p>
</div>

и установите EN-us, чтобы получить $ 100,00:

<div id="app">
  <p>$100.00</p>
</div>

или установите PL, чтобы получить 100,00 злотых:

<div id="app">
  <p>100,00 zł</p>
</div>

Этот плагин также предоставляет различные функции, такие как переводы и форматирование даты.

Ответ 6

Есть проблемы с точностью принятого ответа.

работает функция round (value, decimals) в этом тесте. в отличие от простого примера.

это тест метода toFixed vs round.

http://www.jacklmoore.com/notes/rounding-in-javascript/

  Number.prototype.format = function(n) {
      return this.toFixed(Math.max(0, ~~n));
  };
  function round(value, decimals) {
    return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
  }

  // can anyone tell me why these are equivalent for  50.005, and 1050.005 through 8150.005 (increments of 50)

  var round_to = 2;
  var maxInt = 1500000;
  var equalRound = '<h1>BEGIN HERE</h1><div class="matches">';
  var increment = 50;
  var round_from = 0.005;
  var expected = 0.01;
  var lastWasMatch = true;

  for( var n = 0; n < maxInt; n=n+increment){
    var data = {};
    var numberCheck = parseFloat(n + round_from);
    data.original = numberCheck * 1;
    data.expected =  Number(n + expected) * 1;
    data.formatIt = Number(numberCheck).format(round_to) * 1;
    data.roundIt = round(numberCheck, round_to).toFixed(round_to) * 1;
    data.numberIt = Number(numberCheck).toFixed(round_to) * 1;
    //console.log(data);

    if( data.roundIt !== data.formatIt || data.formatIt !== data.numberIt ||
       data.roundIt !== data.numberIt || data.roundIt != data.expected
      ){
        if(lastWasMatch){
          equalRound = equalRound + '</div><div class="errors"> <hr/> Did Not Round UP <hr/>' ;
            document.write(' <h3>EXAMPLE: Did Not Round UP: ' + numberCheck + '</h3><br /><hr/> ');
            document.write('expected: '+data.expected + ' :: ' + (typeof data.expected)  + '<br />');
            document.write('format: '+data.formatIt + ' :: ' + (typeof data.formatIt)  + '<br />');
            document.write('round : '+data.roundIt + ' :: ' + (typeof data.roundIt)  + '<br />');
            document.write('number: '+data.numberIt + ' :: ' + (typeof data.numberIt)  + '<br />');
            lastWasMatch=false;
        }
        equalRound = equalRound + ', ' + numberCheck;
    } else {
        if(!lastWasMatch){
          equalRound = equalRound + '</div><div class="matches"> <hr/> All Rounded UP! <hr/>' ;
        } {
            lastWasMatch=true;
        }
        equalRound = equalRound + ', ' + numberCheck;
    }
  }
  document.write('equalRound: '+equalRound + '</div><br />');