Vue封装全局过滤器Filters的步骤

2023-07-16 14:58:03 83

（PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-project）

在前后端分离的项目中，经常会有后台返回的数据需要经过处理才能显示到页面上的场景。

使用最多的场景就是日期/时间、数字、字符串的格式化处理，实际业务中可能还有更复杂的数据处理逻辑。

下面就拿封装全局的处理数字和字符串的filter来展示vue如何封装全局filter并统一处理。

一、定义/封装过滤器

在src目录下新建filters目录用来专门存放全局过滤器，如果项目的过滤器过多，那么就要按类型分类。
如果项目需要前台处理的数据不是太多，那么就在filters目录下新建一个index.js来存放所有的过滤器就足够了。

index.js代码如下：

//封装过滤器
//过滤器的声明可以有下列多种写法

/**
*Numberformattingbyunit
*like10000=>10k
*@param{number}num
*@param{number}digits
*@return{string}
*/
functionnumberFormatter(num,digits){
constsi=[
{value:1e18,symbol:"E"},
{value:1e15,symbol:"P"},
{value:1e12,symbol:"T"},
{value:1e9,symbol:"G"},
{value:1e6,symbol:"M"},
{value:1e3,symbol:"k"}
];
for(leti=0;i=si[i].value){
return(num/si[i].value+0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/,'$1')+si[i].symbol
}
}
returnnum.toString();
}

/**
*Numberformattingbythousand
*like10000=>"10,000"
*@param{number}num
*@return{string}
*/
consttoThousandFilter=function(num){
return(+num||0).toString().replace(/^-?\d+/g,m=>m.replace(/(?=(?!\b)(\d{3})+$)/g,','))
};

/**
*Uppercasefirstchar
*like"wenyuan"=>"Wenyuan"
*@param{string}string
*@return{string}
*/
constuppercaseFirst=string=>{
returnstring.charAt(0).toUpperCase()+string.slice(1);
};

exportdefault{
numberFormatter,
toThousandFilter,
uppercaseFirst
};

二、注册过滤器

然后在main.js中引入注册即可使用：

importfiltersfrom"./filters";//globalfilters

//registerglobalutilityfilters
Object.keys(filters).forEach(key=>{
Vue.filter(key,filters[key]);
});

三、在组件内使用写好的过滤器

在组件中使用：

四、效果

五、可能的报错与注意点

在main.js中，要先定义过滤器,再新建vue实例，否则会报Failedtoresolvefilter:xxx的错误。

以上就是Vue封装全局过滤器Filters的步骤的详细内容，更多关于vue封装过滤器的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue封装全局过滤器Filters的步骤

score：{{score|numberFormatter}}

score：{{score|toThousandFilter}}

username：{{username|uppercaseFirst}}

随机推荐

Vue封装全局过滤器Filters的步骤

score：{{score|numberFormatter}}

score：{{score|toThousandFilter}}

username：{{username|uppercaseFirst}}

热门推荐

随机推荐