Vue-Cli中自定义过滤器的实现代码


Posted in Javascript onAugust 12, 2017

本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记

vue2里面移除了内置过滤器,所有过滤器都需要自己定义。

以下例子是使用webpack模版自定义一个日期格式过滤器的例子。

文件结构

.
├── src
│  ├── Filters
│  │  ├── DataFormat.js
│  │  └── index.js
│  └── main.js
└── ...

所有过滤器都放在Filters文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来。

Filters/DataFormat.js

这个文件主要是写了过滤器实现的方法,然后export进行导出。

export default (time, fmt) => {

 fmt = fmt || 'yyyy-MM-dd hh:mm';
 let date = new Date(time);

 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(
   RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)
  );
 }

 let dt = {
  'M+': date.getMonth() + 1,
  'd+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
 }

 for (let key in dt) {
  if (new RegExp(`(${key})`).test(fmt)) {
   let str = dt[key] + ''
   fmt = fmt.replace(RegExp.$1, 
    (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length)
   );
  }
 }

 return fmt;
}

这段代码是在网上找的,我只是对其中稍作修改。

Filters/index.js

这里把所有自定义的过滤器都汇总,方便待会在main.js中一次性添加到全局过滤器中。

如果有多个自定义的过滤器就只需要在这个文件内依次导出就行。

// 导出日期过滤器
import dateFormat from './DateFormat'

// 导出的时候以key value的形式导出,这里就设置了在全局过滤器中的过滤器名字。
export {dateFormat}

// 可以继续导出其他的过滤器

src/main.js

这个文件是程序的主入口,一般负责配置相关的东西。所以添加过滤器的工作毫无疑问的交给它了(也只有在这里能够拿到Vue对象)。

// 默认会找 Filters/index.js
import * as filters from './Filters/'

// 遍历所有导出的过滤器并添加到全局过滤器
Object.keys(filters).forEach((key) => {
 Vue.filter(key, filters[key]);
})

使用

使用起来很简单,和正常的使用方式一摸一样,写在项目中需要的.vue文件中即可

<template>

  <!-- 2017-08-11 21:21 -->
  <h1>{{ new Date() | dateFormat }}</h1>
  
  <!-- 2017年08月11日 21:21:05 -->
  <h1>{{ new Date() | dateFormat('yyyy年MM月dd日 hh:mm:ss') }}</h1>

</template>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
react开发教程之React 组件之间的通信方式
Aug 12 #Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 #Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 #Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 #Javascript
js模块加载方式浅析
Aug 12 #Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
You might like
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
js逆向解密之网络爬虫
2019/05/30 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Django中的session用法详解
2020/03/09 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
聘任书模板
2014/03/29 职场文书
厕所文明标语
2014/06/11 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
出生公证书
2015/01/23 职场文书
世界红十字日活动总结
2015/02/10 职场文书
小学生暑假生活总结
2015/07/13 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏