在main.js中自定义过滤器 ¥过滤器
Vue.filter('moneyFormat', function(value) {
if(!value) return '0.00';
var intPart = Number(value).toFixed(0); //获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
var floatPart = ".00"; //预定义小数部分
var value2Array = value.toString().split(".");
//=2表示数据有小数位
if(value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小数部分
if(floatPart.length == 1) { //补0,实际上用不着
return intPartFormat + "." + floatPart + '0';
} else {
return intPartFormat + "." + floatPart;
}
} else {
return intPartFormat + floatPart;
}
});
在vue的页面中引用
<label> {{ scope.row.credLeftLimit | moneyFormat }}</label>
过滤部分,简化
let val = Number(value).toFixed(2).toString().split(".");
val[0] = val[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return val.join(".");
如果 要做成公共的组件 共大家使用:
1.在common的目录下定义一个 filters.js
let moneyFormat = value => {
if (value) {
let val = Number(value).toFixed(2).toString().split(".");
val[0] = val[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return val.join(".");
}else{
return '0.00'
}
/*if(!value) return '0.00';
var intPart = Number(value).toFixed(0); //获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
var floatPart = ".00"; //预定义小数部分
var value2Array = value.toString().split(".");
//=2表示数据有小数位
if(value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小数部分
return intPartFormat + "." + floatPart;
} else {
return intPartFormat + floatPart;
}*/
}
export { moneyFormat }
2. 然后在main.js中引用
import * as filters from './common/js/filters.js'
/***other code***/
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
3.最后在页面中使用
<p style="color: red;">{{ basicInfos.loanBalance | moneyFormat }}</p>