vue全局过滤器封装
时间:2019-01-11
本文章向大家介绍vue全局过滤器封装,主要包括vue全局过滤器封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
再写cue项目时,所用的过滤器很多时,把所有的过滤器方法封装在一个文件中,然后导出。
1.我的项目路径如下
2.index.js里面的代码
//vue定义全局过滤器
let MoneyFormat = value => {
if(!value) return '0.00';
/*原来用的是Number(value).toFixed(0),这样取整时有问题,例如0.51取整之后为1,感谢Nils指正*/
var intPart = Math.floor(value); //获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
var floatPart = ".00"; //预定义小数部分
var value2Array = value.split(".");
//=2表示数据有小数位
if(value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小数部分
if(floatPart.length == 1) { //补0,实际上用不着
return intPartFormat + "." + floatPart + '0';
} else {
return intPartFormat + "." + floatPart;
}
} else {
return intPartFormat + floatPart;
}
}
let timeFilter = function(value){
return value+"22"
}
export { MoneyFormat,timeFilter }
3.main.js里面添加
//全局过滤器
import * as filters from './filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
4.在.vue文件中就可以直接使用了
- 一步步教你弹性框架-上篇
- 【编程基础】C++初学者需掌握的10个C++特性(中)
- 一步步教你弹性框架-中篇
- 细说ReactiveCocoa的冷信号与热信号系列(2)
- 谈谈个人网站的建立(三)—— 定时任务
- 细说ReactiveCocoa的冷信号与热信号系列(1)
- 【美团技术团队博客】前端组件化开发实践
- Spring中Bean
- 跟Google学写代码--Chromium/base--windows_version源码学习及应用
- 一步步教你弹性框架-下篇
- R语言与机器学习(分类算法)朴素贝叶斯算法
- 【美团技术团队博客】RACSignal的Subscription深入分析
- 谈谈个人网站的建立(八)—— 缓存的使用
- 【编程基础】System.arraycopy()和 Arrays.copyOf()
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解Keepalived安装与配置
- Redis数据结构-字典
- 编程体系结构(07):JavaEE之Web开发
- Centos 6.5环境实现本地局域网搭建YUM的方法【基于HTTP】
- Doug Lea在J.U.C包里面写的BUG又被网友发现了。
- CentOs 7.*中配置安装phpMyAdmin的完整步骤记录
- Linux中怎么通过PID号找到对应的进程名及所在目录方法
- Apache环境下配置多个ssl证书搭建多个站点的方法
- 详解Linux手动释放缓存的方法
- 详解Centos7源码编译安装 php7.2之生产篇
- Centos7利用内存优化磁盘缓存读写速度的方法
- Redis过期策略和数据淘汰机制
- 图片由彩色渐变到黑白动画
- Kafka如何保证数据可靠性
- ubuntu中snap包的安装、更新删除与简单使用