vue实现的封装全局filter并统一管理操作示例


Posted in Javascript onFebruary 02, 2020

本文实例讲述了vue实现的封装全局filter并统一管理操作。分享给大家供大家参考,具体如下:

在前后端分离的项目中,经常会有后台返回的数据需要进过处理才能显示到页面上的场景。

使用最多的场景就是日期和时间的处理,后台一般返回的都是时间戳,那么我们就要对时间戳进行处理。

下面就拿封装全局的处理日期和时间的 filter 来展示如何 vue 如何封装全局 filter 并统一处理。

src 目录下新建 filters 目录用来专门存放全局过滤器,如果项目的过滤器过多,那么就要按类型分类。

我司的项目需要前台处理的数据不是太多,那么就在 filters 目录下新建一个 index.js 来存放所有的过滤器就足够了。

index.js 代码如下:

/*
  日期处理
    time:源时间戳
    type:要处理的格式 默认 xxxx年xx月xx日
      /: xxxx/xx/xx
      .: xxxx.xx.xx
      -: xxxx-xx-xx
 */
export const normalDate = (time,type) => {
  if (time) {
    var date = new Date();
    date.setTime(time);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) * 1 : date.getMonth() + 1;
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    if(type == '-'){
      return year + '-' + month + '-' + day;
    }else if(type == '/'){
      return year + '/' + month + '/' + day;
    }else if(type == '.'){
      return year + '.' + month + '.' + day;
    }else{
      return year + '年' + month + '月' + day + '日';
    }
  }
}
/*
  时间处理
    time:源时间戳
    type:要处理的格式 默认 xxxx年xx月xx日 xx:xx:xx
      /: xxxx/xx/xx xx:xx:xx
      .: xxxx.xx.xx xx:xx:xx
      -: xxxx-xx-xx xx:xx:xx
 */
export const normalTime = (time,type) => {
  if (time) {
    var date = new Date();
    date.setTime(time);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) * 1 : date.getMonth() + 1;
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    if(type == '-'){
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    }else if(type == '/'){
      return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    }else if(type == '.'){
      return year + '.' + month + '.' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    }else{
      return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes + ':' + seconds;
    }
  }
}

然后在 main.js 中引入注册即可使用:

import * as filters from './filters'
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));

在页面中使用:

<p>{{time | normalDate('/')}}</p> //这样时间戳就会转化为xxxx/xx/xx的格式

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
原生js实现日历效果
Mar 02 Javascript
node 版本切换的实现
Feb 02 #Javascript
vue路由缓存的几种实现方式小结
Feb 02 #Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 #Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 #Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 #Javascript
基于vue和websocket的多人在线聊天室
Feb 01 #Javascript
You might like
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
理解javascript封装
2016/02/23 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python正则-re的用法详解
2019/07/28 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
linux下进程间通信的方式
2013/01/23 面试题
办公室文秘岗位职责
2013/11/15 职场文书
给领导的检讨书
2014/02/16 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
社区母亲节活动记录
2014/03/06 职场文书
环境保护标语
2014/06/20 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python