Shulou(Shulou.com)06/03 Report--

这篇文章主要讲解了"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 单文件组件的块中使用import { DateFmt } from '@/filters/DateFmt.js'导入我们的函数。代码如下：

// wx:46488492import { DateFmt } from '@/filters/DateFmt.js';export default {data(){return{curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')}}}

在我们中新加一个元素，并绑定 curDateImportFilter属性，运行 npm run serve 回到浏览器，你就会看到两个格式化日期。这样好吗？我们多了一个import , 虽然实现了，但觉得不够好。

3.2 使用Vue.filter 返回过滤器

如果我们仔细看官方文档，就会发现官说明了，通过 Vue.filter("filter")返回定义的函数 ,所以Vue.filter不仅可以注册，还可以返回。

我们继续在data中添加属性 :

curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')

通过上边的步骤绑定该属性，你会在浏览器上看到三个格式化好的日期。要使用Vue.filter,我们不得不额外的导入import Vue from 'vue'。跟上边一样，虽然实现了，但不够好。

3.3 使用实例属性$options

在vue组件，每个组件都有各自的属性，这些属性大多挂载中属性 $options中，在chrome浏览器打印$vm0信息，我们就找到filter的信息。这里科普一下，在安装vue开发者工具后$vm0表示我们当前选择的组件，结果如下图所示：

Graphically, the filters of the current component are an object and cannot be found directly, but expand to__proto__prototype to see our DateFmt method. All right, now we're going to add attributes to data.

curDateOptFilter: this.$ options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')

Yes, in this way, there is no need to introduce vue or function, just like using it directly in template. Simple and convenient, I feel much better. A little deeper, debugging reveals that Vue.filter is a method that calls the options.filters prototype, as shown below.

Thank you for reading, the above is the content of "VUE filter use method", after the study of this article, I believe everyone has a deeper understanding of the use method of VUE filter, the specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.