换个角度使用VUE过滤器

换个角度使用VUE过滤器Vue中的过滤器主要用于文本格式化，比如小写转换，日期格式化等操作。官方对这个功能的介绍也很简单，但是真的很简单，一个功能而已。但是最近在做两个app的时候，遇到了一些特殊的需求。然后结合源码整理了filter在vue中的一些用法。下面我们讨论一种日期格式。1、定义一个日期格式化函数为9012，我们将使用ES模块在vue初始化的项目src文件中新建一个filters文件夹，并在其中添加DateFmt.js文件。代码如下(),//日"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(varkino)if(newRegExp("("+k+")").test(fmt))fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]):(("00"+o[k]).substr((""+o[k]).length)));returnfmt;}2.使用过滤器DateFmt定义函数后，我们使用全局注册过滤器的方法。在main.js中使用import{DateFmt}from'@/filters/DateFmt.js'导入我们上面定义的函数。使用Vue.filter("DateFmt",DateFmt)完成过滤器全局注册。在components文件夹下，添加我们的测试组件DateFormat.vue，在文件template>div节点下输入{{newDate()|DateFmt('yyyy-MM-ddhh:mm:ss')}}然后在app.vue引入我们刚刚添加的新添加的组件，运行它，你会看到当前日期已经按照我们需要的格式显示在网页上了。是的，就这么简单，结束了吗？3.在JS中使用DateFmt好奇的朋友会发现我们定义的过滤器都是在模板中使用的，那么在js代码中如何使用呢？当然，在这两款app的开发过程中，都有这样的需求，需要减少数据转换的次数。3.1在组件页面导入函数回到开头，我们强调过滤器其实就是一个函数。既然是函数，直接导入就好了。因此，在我们最初设置DateFormat.vueSFC的import{DateFmt}from'@/filters/DateFmt.js';exportdefault{data(){return{curDateImportFilter:DateFmt(newDate(),'yyyy-MM-ddhh:mm:ss')}}}向我们的