Mój komponent Vue wygląda tak:
<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>
Wynik {{ item.total }}
jest
26000000
Ale chcę sformatować to tak:
26.000.000,00
W jquery lub javascript mogę to zrobić
Ale jak to zrobić w komponencie vue?
vue.js
vuejs2
vue-component
vuex
samuel toh
źródło
źródło
Odpowiedzi:
Napisałbym do tego metodę, a potem tam, gdzie musisz sformatować cenę, możesz po prostu umieścić metodę w szablonie i przekazać wartość w dół
A potem w szablonie:
Przy okazji - nie przywiązywałem zbytniej wagi do zamiany i wyrażeń regularnych. Można to poprawić.
enter code here
Pokaż fragment kodu
Vue.filter('tableCurrency', num => { if (!num) { return '0.00'; } const number = (num / 1).toFixed(2).replace(',', '.'); return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); });
źródło
return (value/1).toFixed(2).toLocalString();
?computed
zamiast tego?Stworzyłem filtr. Filtra można używać na dowolnej stronie.
Wtedy mogę użyć tego filtra w ten sposób:
Użyłem tych powiązanych odpowiedzi, aby pomóc we wdrożeniu filtra:
źródło
Intl
ma najlepszego wsparcia .isNaN(parseFloat(value))
raczej niżtypeof value !== "number"
?W vuejs 2 możesz użyć filtrów vue2, które mają również inne zalety.
Następnie użyj tego w ten sposób:
Ref: https://www.npmjs.com/package/vue2-filters
źródło
Możesz formatować walutę, pisząc własny kod, ale jest to tylko rozwiązanie w tej chwili - gdy Twoja aplikacja będzie się rozwijać, możesz potrzebować innych walut.
Jest z tym inny problem:
Myślę, że najlepszą opcją jest użycie kompleksowego rozwiązania do internacjonalizacji, np. Biblioteki vue-i18n ( http://kazupon.github.io/vue-i18n/ ).
Używam tej wtyczki i nie muszę się martwić o takie rzeczy. Proszę spojrzeć na dokumentację - to naprawdę proste:
http://kazupon.github.io/vue-i18n/guide/number.html
więc po prostu użyj:
i ustaw EN-us na 100,00 $ :
lub ustaw PL na 100,00 zł :
Ta wtyczka zapewnia również różne funkcje, takie jak tłumaczenia i formatowanie daty.
źródło
Komentarz @RoyJ zawiera świetną sugestię. W szablonie możesz po prostu użyć wbudowanych zlokalizowanych ciągów:
Nie jest obsługiwany w niektórych starszych przeglądarkach, ale jeśli celujesz w IE 11 i nowsze, powinno być dobrze.
źródło
Użyłem niestandardowego rozwiązania filtrującego zaproponowanego przez @Jess, ale w moim projekcie używamy Vue razem z TypeScript. Tak to wygląda z TypeScript i dekoratorami klas:
import Component from 'vue-class-component'; import { Filter } from 'vue-class-decorator'; @Component export default class Home extends Vue { @Filter('toCurrency') private toCurrency(value: number): string { if (isNaN(value)) { return ''; } var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }); return formatter.format(value); } }
W tym przykładzie filtr może być używany tylko wewnątrz komponentu. Nie próbowałem jeszcze wdrożyć go jako filtra globalnego.
źródło
Możesz użyć tego przykładu
źródło
Istnieją problemy z precyzją zaakceptowanej odpowiedzi.
funkcja round (value, decimals) w tym teście działa. w przeciwieństwie do prostego przykładu toFixed.
jest to test metody 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 />');
przykład mixin
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); } } }
źródło
val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
po tym dla. i zmiany.