欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue过滤器使用

程序员文章站 2023-04-07 19:49:09
格式(一个过滤器):{{ 'msg' | filterA }} (多个过滤器):{{ 'msg' | filterA | filterB }} window.onload =function(){ /*在创建Vue实例之前就定义全局过滤器,直接使用过滤器是没有效果的*/ Vue.filter('ca ......

格式(一个过滤器):{{ '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}} 格式化金额,四舍五入保留两位小数