随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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

posted on   小虾米吖~  阅读(401)  评论(1编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示