本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记
vue2里面移除了内置过滤器,所有过滤器都需要自己定义。
以下例子是使用webpack模版自定义一个日期格式过滤器的例子。
文件结构
．
├──src
│├──过滤器
││├──DataFormat.js
││└──index.js
│└──main.js
└──…
所有过滤器都放在过滤器文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来。
<强>/DataFormat过滤器。js
这个文件主要是写了过滤器实现的方法,然后<代码> 出口进行导出。
出口违约(时间,fmt)=比;{
fmt=fmt | |“yyyy-MM-dd hh: mm”;
让日期=new日期(时间);
如果(/(y +)/test (fmt)) {
fmt=fmt.replace (
RegExp。1美元(date.getFullYear () +”)。substr (4 - RegExp。1.美元长度)
）;
}
让dt={
“M +”: date.getMonth () + 1,
“d +”: date.getDate (),
“h +”: date.getHours (),
“m +”: date.getMinutes (),
“s +”: date.getSeconds ()
}
(让关键dt) {
如果新的正则表达式((${关键}))test (fmt)) {
让str=dt(例子)+”
fmt=fmt.replace (RegExp。1美元,
(RegExp。1美元。长度===1)& # 63;str:(“00”+ str) .substr (str.length)
）;
}
}
返回fmt;
}
之前
这段代码是在网上找的,我只是对其中稍作修改。
<强>过滤器/索引。js
这里把所有自定义的过滤器都汇总,方便待会在<代码> main.js>
如果有多个自定义的过滤器就只需要在这个文件内依次导出就行。
//导出日期过滤器
从“进口dateFormat。/dateFormat '//导出的时候以键值的形式导出,这里就设置了在全局过滤器中的过滤器名字。
出口{dateFormat}//可以继续导出其他的过滤器
之前
<强> src/主要。js
这个文件是程序的主入口,一般负责配置相关的东西,所以添加过滤器的工作毫无疑问的交给它了(也只有在这里能够拿到Vue对象)。
//默认会找过滤器/index.js
从’。/过滤器/进口*作为过滤器的//遍历所有导出的过滤器并添加到全局过滤器
种(过滤器).forEach((关键)=比;{
Vue。过滤器(关键、过滤器(例子));
}）
之前
<强>使用
使用起来很简单,和正常的使用方式一摸一样,写在项目中需要的.vue文件中即可
& lt; template>
& lt; !——2017-08-11 21:21祝辞
& lt; h2>{{新的日期()| dateFormat}} & lt;/h2>
& lt; !——2017年08月11日21:21:05——比;
& lt; h2>{{新的日期()| dateFormat (“yyyy年MM月dd日hh: MM: ss”)}} & lt;/h2>
& lt;/template>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
