Vue过滤器使用

格式（一个过滤器）：{{ 'msg' | filterA }}

（多个过滤器）：{{ 'msg' | filterA | filterB }}

window.onload =function(){
/*在创建Vue实例之前就定义全局过滤器,直接使用过滤器是没有效果的*/

Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1)
});

Vue.filter('upper', function (value) {
if (!value) return '';
value = value.toString();
return value.toUpperCase();
});

Vue.filter('lower', function (value) {
if (!value) return '';
value = value.toString();
return value.toLowerCase();
});

 

格式化金额，四舍五入保留两位小数

Vue.filter('currency',function (value) {
value = value.toString().replace(/\$|\,/g,'');
if(isNaN(value)) {
value = "0";
}
let sign = (value == (value = Math.abs(value)));
value = Math.floor(value*100+0.50000000001);
let cents = value%100;
value = Math.floor(value/100).toString();
if(cents<10) {
cents = "0" + cents
}
for (var i = 0; i < Math.floor((value.length-(1+i))/3); i++) {
value = value.substring(0,value.length-(4*i+3))+',' +
value.substring(value.length-(4*i+3));
}

return ('￥'+((sign)?'':'-') + value + '.' + cents);
});

new Vue({
el: '#box',
data: {
msg:'WELCOME'
}
});
}

使用：{{'hello'| capitalize}}

<!--串联使用多个过滤器时注意意义：本身全是大写先转小写再转首字母大写-->

{{msg|lower|capitalize}}

{{ 12.154 | currency}} 格式化金额，四舍五入保留两位小数