过滤器的实现

写项目的时候，有一些方法我们需要全局使用，比如保留小数点四色五项数字，一些工具和方法，格式化字符等等。这些被很多页面频繁使用的方法，一般封装成全局方法；我曾经通过几种方式做到这一点：

1.安装到vue.prototype

例如，在main.js条目文件中，我们封装了一个函数来获取时间戳。

vue . prototype . now=Date . now | | function(){返回新日期()。getTime()；};然后你可以在。vue页面

脚本导出默认{ mounted(){ console . log(' now : ' this . now())；}，} /script 2，全局混合混音

它也在main.js中

每个人都应该知道mixins的全球注射规则。如果组件中没有getTime方法，这个方法将被注入到页面中。

Vue.mixin({ data() {}，methods: { getTime() {返回新日期()。getTime()；} } });新App({ el: '#app' //.});3.关于vue.filters

(1)问题

前两种方法有很多缺点。例如，将全局变量挂载到原型总是不好的，我们使用vuex用于国家管理；如果第二种方法是全局混合的，这些方法也将混合在子组件中，等等。最大的缺点是代码的可读性和维护性。如果项目很大，有很多重用方法，你不能把它都挂在prototye上，对吗？此时，vue.filters滤波器可以更好地解决这个问题。

(2)使用

先看一波官网——门户网站

好了，看完之后，我们已经基本了解了滤镜的概念和基本用法，接下来我们具体说说在项目中的使用。

创建一个新的过滤器文件夹，并丢失一行代码(一个常见的代码行是舍入数字)

数字被四舍五入以保留两个小数点

main.js中引入

//来自“Vue”的全局filtersimport Vue从“@/filters”导入*作为筛选器；Object.keys(筛选器)。forEach((key)={ Vue.filter(key，filters[key])；});然后你可以在页面上使用它

div { { num | formatmuntfixed 2 } }/div script data(){ return { num : 1111 } }/script是本文的全部内容。希望对大家的学习有帮助，支持我们。