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 相关文章推荐
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Vue中computed及watch区别实例解析
Aug 01 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传参之传值与传址的区别
2015/04/24 PHP
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
python实现的系统实用log类实例
2015/06/30 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python访问hdfs的操作
2020/06/06 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
白酒业务员岗位职责
2013/12/27 职场文书
英文留学推荐信范文
2014/01/25 职场文书
二手房购房意向书
2015/05/09 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
高一英语教学反思
2016/03/03 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
在Python 中将类对象序列化为JSON
2022/04/06 Python