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选择器之基本过滤选择器详解
Jan 27 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
Node.js Express安装与使用教程
May 11 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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文本操作类
2006/11/25 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
PHP 裁剪图片
2021/03/09 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python实现的生成word文档功能示例
2019/08/23 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
商业活动邀请函
2014/02/04 职场文书
八项规定整改方案
2014/02/21 职场文书
三潭印月的导游词
2015/02/12 职场文书
团员个人年度总结
2015/02/26 职场文书
刮痧观后感
2015/06/05 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
导游词之神仙居景区
2019/11/15 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python