如何从另一个角度使用VUE滤波器

前言

Vue中的过滤器主要用于文本格式，比如小写到大小，日期格式等等。这个函数的官方介绍也很简单，但是真的很简单，只是一个函数。不过最近做两个应用的时候，遇到了一些特殊需求。然后，结合源代码对vue中过滤器的一些用法进行了梳理。让我们用日期格式来讨论它。

1.定义日期格式功能

它是9012，所以我们将使用ES Module在vue初始化的src文件中创建新的filters文件夹，并在其中添加DateFmt.js文件，代码如下

导出函数DateFmt(date，fmt) {if (date==null)返回null；Var o={'m' :date.getmonth () 1，//month' d ': date.getDate()，//day' h ': date.getHours()，//hour' m ': date.getMinutes()，//minutes ' : date。getseconds()，//second ' q ' : path。楼层((日期。getmonth () 3)/3)、//季度的' :date。get毫秒()}；if (/(y )/。test(fmt))fmt=fmt . replace(RegExp。$1，(date.getFullYear()' ')。substr(4 - RegExp。$ 1 . length))；for (var k in o) if (new RegExp('(' k ')')。test(fmt))fmt=fmt . replace(RegExp。$1，(RegExp。$1.length==1)？(o[k]) : (('00' o[k])。substr((' o[k])。长度)))；返回fmt}2.使用过滤器日期

定义函数后，采用全局注册过滤器的方式。使用main.js中的“@/filters/datefmt.js”中的import {datefmt}来导入我们上面定义的函数。使用Vue.filter('DateFmt '，DateFmt)完成filter的全局注册。

在components文件夹中，添加我们的测试组件DateFormat.vue，在这个文件的templatediv节点下输入{ { new date()| datefmt(' yyy-mm-ddhh :mm m 3360s ')}，然后在app.vue中引入我们新添加的组件并运行，你会看到当前日期已经以我们需要的格式显示在网页上。是的，就这么简单。结束了吗？

3.在JS中使用DateFmt

好奇的朋友会发现，我们定义的所有过滤器都是用在模板中的，那么在js代码中怎么用呢？当然，在这两个应用的开发过程中，有必要减少数据转换的次数。

3.1组件页面上的导入功能

回到开头，我们强调过滤器实际上是一个函数。既然是功能，引入就好。因此，从' @/filters/datefmt.js '导入{datefmt}用于在DateFormat.vue单文件组件的脚本块中导入我们的函数。代码如下：

scriptimport { DateFmt }来自' @/filters/DateFmt . js '；export default { data(){ return { curdateimportfilter : datefmt(new date()，' yyyy-mm-ddhh :mm 3360s ')}/script在我们的模板中添加一个新元素，绑定curateimportfilter属性，运行npm run serve返回浏览器，您将看到两个格式化的日期。这样好吗？我们添加了一个导入。虽然实施了，但还不够好。

3.2使用Vue.filter返回过滤器

仔细看官方文档，会发现官方已经声明定义的函数是通过Vue.filter('filter ')返回的，所以Vue.filter不仅可以注册，还可以返回。

我们继续向数据添加属性：

凝结真空过滤器3360vue。筛选器(' datefmt') (newdate()，' yyyy-mm-ddhh:mm3360ss ')通过上述步骤绑定此属性，您将在浏览器中看到三个格式化的日期。要使用Vue.filter，我们必须另外从“Vue”导入Vue。如上，虽然实现了，但是还不够好。

3.3使用实例属性$options

在vue组件中，每个组件都有自己的属性，这些属性大多安装在attribute $options中。如果你在chrome浏览器中打印$vm0信息，我们会找到过滤器的信息。在这里，安装vue开发工具后，$vm0代表我们当前选择的组件，结果如下图所示：

从图形上看，当前组件的过滤器是一个对象，不能直接找到，但是我们可以通过扩展到__proto__的原型来看到我们的DateFmt方法。好了，现在我们继续向数据添加属性

可达光学过滤器：这个。$ options . filters . datefmt(new date()，' yyyy-mm-DD hh : mm 3360 ss ')是的，这样就不需要引入vue或函数，就像直接在模板中使用一样。简单方便，感觉好多了。深入的，通过调试，我们会发现Vue.filter调用了options.filters原型上的方法，如下图所示

4.摘要

不管这个函数有多简单，它都有意想不到的用途。做发展，还是发散。本来，本文还想分享范围css在vue中的渗透功能。为了阅读方便，我们下次再听。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。