VUE过滤器的使用方法

这篇文章主要讲解了"VUE过滤器的使用方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"VUE过滤器的使用方法"吧！

1. 定义一个日期格式化函数

都9012了，我们就采用 ES Module的写法，在vue初始化的项目src的文件中新建一个filters文件夹，并在其中添加DateFmt.js文件，代码如下

// wx:46488492export function DateFmt(date, fmt) {if (date == null) return null;var o = {    "M+": date.getMonth() + 1, // 月份    "d+": date.getDate(), // 日    "h+": date.getHours(), // 小时    "m+": date.getMinutes(), // 分    "s+": date.getSeconds(), // 秒    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度    "S": date.getMilliseconds()};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]).length)));return fmt;}

2. 使用过滤器 DateFmt

定义好函数后，我们采用全局注册filter的方式。在main.js中使用import { DateFmt } from '@/filters/DateFmt.js' 导入我们上边定义的函数。 使用Vue.filter("DateFmt", DateFmt) 完成filter全局注册。

在components文件夹中，添加我们的测试组件DateFormat.vue,在该文件template>div节点下输入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}} 然后在app.vue引入我们刚新添加的组件，运行，你就会在看到当前日期已经按照我们需要的格式显示在网页上。是的，就是这么简单，那完了么？

3. 在JS中使用 DateFmt

好奇的朋友会发现，我们定义的filter都是在template中使用的，那我如何在js代码中使用呢？当然，在开发这两个app期间，减少数据转换的次数，有了这样的需求。

3.1 在组件页面导入函数

回到开头，我们强调了一下，过滤器其实就是一个函数。既然是函数，那引入就好了。所以在我们最初建立 DateFormat.vue 单文件组件的

在我们