当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue过滤器使用

Vue过滤器使用

2019年04月05日  | 移动技术网IT编程  | 我要评论

格式（一个过滤器）：{{ '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}} 格式化金额，四舍五入保留两位小数

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网