vue-cli 3全局过滤器示例代码详细说明

在VUE 1 . x版本中，它附带了几个基本的过滤器(尽管使用不多)。

在2.x版本之后，删除了几个内置过滤器。如果需要过滤器，开发人员应该自己定义它们。

您可以在组件内部定义过滤器，但它将成为本地过滤器，不能在其他组件中使用。所以你通常不会这么做。

也可以在main.js中编写过滤器，但是如果项目中有多个过滤器，会让main.js文件看起来很庞大，不方便后期维护。

因此，通常会创建一个新的js文件来存储所有的过滤器。最后，它被导入main.js以供全局使用。

1.创建过滤器. js

首先，创建新的filters.js文件。将此文件放入src/assets。

因为这是用来存储静态资源的。这个文件夹可以用来存储图片、css和js资源，还有一些定制的功能。如果需要更好的分类，可以在assets文件夹中创建js、css、img等文件夹。

2.创建筛选规则

这里我创建了三个过滤器

//转小写字母lower=value=value。to lower case()；//大写letupper=value=value . touppercase()；让currency style=(value，style)={//currency format/* * * style : * currency:currency * number:number format */if(style==' number '){//number format返回parseloat (value。替换(/[\ d \.} else {//货币格式，保留2位小数位var n=2；value=parseFloat((值' ')。replace(/[^\d\.-]/g ' '))。toFixed(n)' '；var l=value.split(' . ')[0].拆分(“”)。反向()，r=value.split(' . ')[1];var t=for(var I=0；i l .长度；i ) { t=l[i] ((i 1) % 3==0 (i 1)！=l .长度？',' : '');}返回t.split(“”)。反转()。联接(“”)。”r；}}导出{下部、上部、当前样式} 3。在main.js中注册全局过滤器

从“vue”导入Vue从“App”导入。/App.vue“导入*作为过滤器来源”。/assets/filters ' object . key(筛选器)。forEach(key={ Vue.filter(key，Filters[key]))})vue。配置。production tip=false new vue({ render :h=h(app)，})。$ mount ('# app ')通过forEach循环将用户定义的函数注册到过滤器中。

4.用于组件

template div id=' app ' p { { num 1 | currency style(' currency ')}/p { { num 2 | currency style(' number ')} }/p p { { msg 1 | lower } }/p { { msg 2 | upper } }/p/div/templatescript export default { name : ' app '，data() { return { num1: 123456，num2: '123，456 '，msg1:

摘要

以上是边肖介绍的vue-cli 3全局过滤器示例代码的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！