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 相关文章推荐
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
关于前后端json数据的发送与接收详解
Jul 30 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
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之require/include顺序 推荐
2011/01/02 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python 统计代码行数简单实例
2017/05/04 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
清扬洗发水广告词
2014/03/14 职场文书
教师产假请假条
2014/04/10 职场文书
初中生毕业评语
2014/12/29 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年电教工作总结
2015/05/26 职场文书
导游词之太原天龙山
2020/01/02 职场文书