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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
js对象的复制继承实例
Jan 10 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
JS获取本地地址及天气的方法实例小结
May 10 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
基于python实现学生管理系统
2018/10/17 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python多线程同步之文件读写控制
2021/02/25 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
初二政治教学反思
2014/01/12 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年人事科工作总结
2015/04/28 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL