내 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>
의 결과{{item.총}}
가
26000000
하지만 내가 원하는 형식으로 그것을 다음과 같다:
26.000.000,00
에 jquery javascript,나는 그것을 할 수 있습니다
하지만 작업을 수행할 수 있는 방법을 vue 구성 요소는?
내가 만든 필터를 사용하면 됩니다. 필터를 사용될 수 있습에서 어떤 페이지입니다.
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>
내가 사용하는 이러한 관련 답변을 도움과 구현의 여과기:
-https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-dollars-currency-string-in-javascript -https://stackoverflow.com/questions/1303646/check-whether-variable-is-number-or-string-in-javascript
업데이트:사용하는 것이 좋 솔루션으로 필터에 의해 제공됩@Jess.
내가 쓰는 방법,그리고 그런 다음 필요가 있는 형식으로 가격할 수 있습니다 그냥 넣어 방법 템플릿과 전달 값 아래로
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>
BTW-지 않았't 너무 많이 넣 관리에서 교체 및 regular expression.그것은 향상 시킬 수 있습니다.
와 vuejs2 를 사용할 수 있습 vue2-필는 다른 맛뿐만 아니라.
npm install vue2-filters
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)
다음을 사용하는 것이다.
{{ amount | currency }} // 12345 => $12,345.00
할 수 있는 형식으로 통화로 직접 코드를 작성하는 그러나 그것은 단지 해결책에 대한 순간 때 응용 프로그램이 성장할 수 있는 다른 통화입니다.
또 다른 문제가 있으로 이:
내가 생각하는 최고의 옵션을 사용하여 복잡한 솔루션에 대한 국제화 예를 들어 라이브러리 vue-i18n( http://kazupon.github.io/vue-i18n/).
내가 사용하는 이 플러그인이고 나는't 에 대해 걱정하이 같은 것들입니다. 시기 바랍에 문서-그것은 정말 간단합니다:
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,00zł:
<div id="app">
<p>100,00 zł</p>
</div>
이 플러그인을 제공한 다른 기능이 같은 번역이 날짜와 서식을 지정합니다.
내가 사용하는 사용자 정의 필터링 솔루션을 제안하여@Jess 하지만 저는 이 프로젝트에서는 우리가 사용하는 뷰와 함께 타이프 라이터. 이처럼 보이는 방법으로 타이프 라이터와 클래스 디: ``js 구성 요소를 가져오기에서'vue 클래스 구성 요소는'; 가져오기{필터를}에서'vue 급-장식';
@구성 요소 내보내기 기본 수준의 홈 확장 Vue{
@필터('toCurrency') 개인 toCurrency(값:number):string{ if(isNaN(값)){ return''; }
var formatter=new Intl.숫자 형식('en-US',{ 스타일:'통화', currency:'KRW', minimumFractionDigits:0 }); 반 formatter.형식(value); } } `` 이 예제에서는 필터 내에서만 사용할 수 있습니다. I haven't 려고 그것을 구현하는 글로벌 필터,아직입니다.
이 문제의 정밀도를 받아 대답이다.
라운드(값,소수)함수에서 이 테스트 작동합니다. 달리 단순한 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);
}
}
}