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}} 格式化金额,四舍五入保留两位小数
上一篇: 比较有效果的推广网站常用的方法