当前位置: 首页 > news >正文

vue2.0全局过滤器引用

vue2.0全局过滤器引用

1、filters.js文件内容

const filters = {
  //过滤日期格式
  formatDate: function (value, fmt) {
    //针对ios日期展示NaN-aN-aN问题,正则替换'-'为'/'
    value = !value ? value: value.toString().replace(/-/g, '/');
    let getDate = !value ? new Date() : new Date(value);
    let o = {
      'M+': getDate.getMonth() + 1,
      'd+': getDate.getDate(),
      'h+': getDate.getHours(),
      'm+': getDate.getMinutes(),
      's+': getDate.getSeconds(),
      'q+': Math.floor((getDate.getMonth() + 3) / 3),
      'S': getDate.getMilliseconds()
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt;
  },
  //字典转换
  dicValue: function (value, dicTypeOptions) {
    if (dicTypeOptions.find(item => item.cddValue == value) != undefined) {
      return dicTypeOptions.find(item => item.cddValue == value).cddName
    } else {
      return '其他'
    }
  },
  //过滤金额
  money: function (value) {
    if (value && value != null) {
      value = String(value);
      var left = value.split('.')[0], right = value.split('.')[1];
      right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
      var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
      return (Number(value) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
    } // 注意===在这里的使用,如果传入的value为0,if中会将其判定为boolean类型,故而要另外做===判断
    else if (value === 0) { 
      return '0.00';
    } else {
      return '';
    }
  }
}

export default (Vue) => {
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })
}

2、main.js文件中引用

./utils/filters为filters.js文件路径

import filters from './utils/filters'
filters(Vue)

相关文章:

  • vue2.0 多图片上传组件(el-upload)
  • json对象转map,map转list
  • 关于-webkit-的一些用法
  • CSS:字数超出两(n)行,省略号表示
  • Vant轮播多个,实现一次轮播中展示多个div,此处以三个一屏为例
  • ElementUI Tooltip 文字提示应用及更改宽度和背景色
  • vuex最详细完整的使用用法(转载)
  • vue移动端网页适配
  • 前端性能优化之Gzip打包
  • 初使用uni-app,适配多端,踩坑及经验合集
  • vscode 代码保存eslint自动格式化,最新配置:Eslint+Prettier
  • less清除浮动clearfix代码片段
  • Git使用及配置
  • Jenkins安装部署及实现CI/CD(ubuntu20.04)
  • Apache+tomcat安装 linux
  • #Java异常处理
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • 07.Android之多媒体问题
  • 0x05 Python数据分析,Anaconda八斩刀
  • android 一些 utils
  • CSS 专业技巧
  • CSS魔法堂:Absolute Positioning就这个样
  • C语言笔记(第一章:C语言编程)
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • ES6系统学习----从Apollo Client看解构赋值
  • HashMap剖析之内部结构
  • Java IO学习笔记一
  • JavaScript 基本功--面试宝典
  • JavaScript-Array类型
  • Lucene解析 - 基本概念
  • Vue组件定义
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 和 || 运算
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 精彩代码 vue.js
  • 我感觉这是史上最牛的防sql注入方法类
  • 我建了一个叫Hello World的项目
  • 一个SAP顾问在美国的这些年
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • #define 用法
  • $refs 、$nextTic、动态组件、name的使用
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (篇九)MySQL常用内置函数
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET6 开发一个检查某些状态持续多长时间的类
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网
  • [android学习笔记]学习jni编程
  • [C++]模板与STL简介
  • [C++]指针与结构体
  • [emuch.net]MatrixComputations(7-12)
  • [ffmpeg] aac 音频编码
  • [RK3568 Android11] Input UI 使用流程