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}} 格式化金额，四舍五入保留两位小数