Comment puis-je formater des devises dans une composante Vue?
mon composant Vue est comme ceci :
<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>
le résultat de {{ item.total }} est
26000000
mais je veux que le format soit comme ceci:
26.000.000,00
en jQuery ou javascript, je peux le faire
mais, comment le faire en vue composante?
6 réponses
j'écrirais la méthode pour cela, et alors où vous devez formater le prix, vous pouvez juste mettre la méthode dans le modèle et passer la valeur vers le bas
methods: {
formatPrice(value) {
let val = (value/1).toFixed(2).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
}
}
et ensuite dans le modèle:
<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>
BTW-Je n'ai pas mis trop de soin sur le remplacement et l'expression régulière.Elle pourrait être améliorée.
j'ai créé un filtre. Le filtre peut être utilisé dans n'importe quelle page.
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);
});
alors je peux utiliser ce filtre comme ceci:
<td class="text-right">
{{ invoice.fees | toCurrency}}
</td>
j'ai utilisé ces réponses connexes pour aider à la mise en œuvre du filtre:
Vous pouvez formater la monnaie d'écrire votre propre code, mais c'est juste pour l'instant - lorsque votre application va grandir, vous pouvez avoir besoin d'autres devises.
il y a un autre problème avec ceci:
- Pour EN-us - dollar signe est toujours à la veille de la devise - $2.00,
- pour PL sélectionné vous retournez signe après montant comme 2,00 zł.
je pense que la meilleure option est d'utiliser des complexes solution pour l'internationalisation par exemple library vue-i18n( http://kazupon.github.io/vue-i18n / ).
j'utilise ce plugin et je n'ai pas à vous soucier de telles choses. Veuillez consulter la documentation - c'est vraiment simple:
http://kazupon.github.io/vue-i18n/guide/number.html
vous n'avez qu'à utiliser:
<div id="app">
<p>{{ $n(100, 'currency') }}</p>
</div>
et mis EN-us pour obtenir $100.00 :
<div id="app">
<p>0.00</p>
</div>
ou PL pour obtenir 100,00 zł :
<div id="app">
<p>100,00 zł</p>
</div>
ce plugin fournit également différentes fonctionnalités comme les traductions et le formatage de date.
le commentaire de @RoyJ a une grande suggestion. Dans le modèle, vous pouvez simplement utiliser des chaînes de caractères localisées:
<small>
Total: <b>{{ item.total.toLocaleString() }}</b>
</small>
ce n'est pas pris en charge dans certains des navigateurs plus anciens, mais si vous ciblez IE 11 et plus tard, vous devriez être très bien.
avec vuejs 2, Vous pouvez utiliser VUE2-filters qui a d'autres goodies ainsi.
npm install vue2-filters
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)
alors utilisez - le comme ceci:
{{ amount | currency }} // 12345 => ,345.00
il y a des problèmes avec la précision de la réponse acceptée.
la fonction ronde(valeur, décimales) dans ce travail d'essai. contrairement à l'exemple simple à corriger.
il s'agit d'un test de la méthode 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 />');mixin exemple
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);
}
}
}