由于2.X自带的过滤器版本很多已不能用,所以自定义一些过滤器还是有必要的,利用的原理就是前一个的输出作为后一个的输入。如下封装了几个过滤器。
我的主要结构是这样的
<div id="app">
<p>{{(msg) | getDecimalPart}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '2222222'
},
methods: {},
filters: {
/**
* 在数字前面加上¥
* */
msgFormat: function (myMsg) { //function 的第一个参数指的是管道符前面的 msg
var str=myMsg.split('');
var ary=str.unshift('¥');
return str.join('');
},
/**
* 制保留2位小数
* 例如:2,会在2后面补上00.即2.00
*/
toDecimal2:function (x1) {
var f = parseFloat(x1);
if (isNaN(f)) {
return false;
}
var f = Math.round(x1 * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
},
/**
* 获取两位小数部分
* 例如:11.05,返回 '05'
* 如果是整数,返回 '00'
*/
getDecimalPart:function (x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s.split(".")[1];
}
}
});
</script>
此后还有很多工具可以使用,加载filters里面就行。
/**
* 金额格式化
* fmtMonty(2,'.', ',')后两个可省略
*/
Vue.filter('fmtMoney', (number, decimals, dec_point, thousnds_stp) => {
/*
* 参数说明:
* number:要格式化的数字
* decimals:保留几位小数
* dec_point:小数点符号
* thousands_sep:千分位符号
* */
number = (number + '').replace(/[^0-9+-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousnds_stp === 'undefined') ? ',' : thousnds_stp,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.ceil(n * k) / k;
}
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
var re = /(-?\d+)(\d{3})/;
while (re.test(s[0])) {
s[0] = s[0].replace(re, "$1" + sep + "$2");
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
});
/**
* 名字,身份证,银行卡,隐藏部分数字变‘*’号
* plusXing(前面保留位数,后面保留位数)
*/
Vue.filter('plusXing', (str, frontLen, endLen) => {
var len = str.length - frontLen - endLen;
var xing = '';
for (var i = 0; i < len; i++) {
xing += '*';
}
return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
});
/**
* 银行卡号四个数字分割
*/
Vue.filter('formartCode', n => {
var b = parseInt(n).toString();
var len = n.length;
if (len <= 4) {
return n;
} else {
var r = len % 4;
return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{4}/g).join(",") : b.slice(r, len).match(/\d{4}/g).join(" ");
}
});
详情可参考https://blog.csdn.net/wandoumm/article/details/80168970