Мой компонент Vue является такой :
<template>
<div>
<div class="panel-group"v-for="item in list">
<div class="col-md-8">
<small>
Total: <b>{{ item.total }}</b>
</small>
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
Результат `{{ пункт.общая }} - это
26000000
Но я хочу, чтобы формат его такой :
26.000.000,00
В jQuery или JavaScript, я могу сделать это
Но, как это сделать в компоненте вю?
Я создал фильтр. Фильтр может быть использован на любой странице.
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>
Я использовал эти соответствующие ответы, чтобы помочь с реализацией фильтра:
обновление: я предлагаю использовать решение с фильтрами, предоставляемые @Джесс.
Я хотел бы написать метод для этого, а потом, где нужно, чтобы цена формат, вы можете просто положить метод в шаблоне и стоимость пройти
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>
Кстати - я вовсе'т положить слишком много на замены и регулярных выражений.Это может быть улучшено.
С vuejs 2, Вы можете использовать вуэ2-фильтров, которые есть также другие вкусности.
npm install vue2-filters
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)
Затем использовать его вот так:
{{ amount | currency }} // 12345 => $12,345.00
Вы можете форматировать валюты писать свой собственный код, но это просто решение на данный момент - когда ваше приложение будет расти, вы можете нужны другие валюты.
Есть еще одна проблема с этим:
Думаю, лучшим вариантом является использование комплексное решение для интернационализации например в библиотеке вю-как 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>
и набор АН-нас к вам $100.00:
<div id="app">
<p>$100.00</p>
</div>
или установить ЛП, чтобы получить 100,00 зл:
<div id="app">
<p>100,00 zł</p>
</div>
Этот плагин также предоставляют различные функции, такие как перевод и форматирование даты.
Комментарий @RoyJ имеет большое предложение. В шаблоне вы можете просто использовать встроенный в локализованные строки:
<small>
Total: <b>{{ item.total.toLocaleString() }}</b>
</small>
Это's не поддерживается в некоторых старых браузерах, но если вы're пристреливая т. е. 11 и выше, вы должны быть хорошо.
Я использовал пользовательские решения фильтр, предложенный @Джесс, но в моем проекте мы используем вю вместе с TypeScript. Вот как это выглядит с TypeScript и декораторов класса: ``Яш импортная составляющая от 'Вуэ-класса-компонента'; импорт { фильтр } с 'Вуэ-класс-декоратор';
@Компонентов экспорт класса домашняя распространяется вю {
Фильтр @('toCurrency') частная toCurrency(значение: число): строка { если (isNaN(значение)) { вернуться ''; }
ВАР праматерии = новый международный.NumberFormat('ан-Нас', { стиль: 'валюты', валюта: 'США', minimumFractionDigits: 0 }); возвращение праматерии.формат(значение); } } `` В этом примере фильтр может быть использован только внутри компонента. Я еще'т пытались реализовать его в качестве глобального фильтра, пока.
Есть вопросы, с точностью принято отвечать.
функция округл(значение дроби) в этом тесте работает. в отличие от простой toFixed пример.
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 />');
в
в
export default {
methods: {
roundFormat: function (value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals).toFixed(decimals);
},
currencyFormat: function (value, decimals, symbol='$') {
return symbol + this.roundFormat(value,2);
}
}
}
в