Vue如何封装多个全局过滤器到一个文件
在写vue项目时,所用的过滤器很多时,把所有的过滤器方法封装在一个文件中,然后导出,并绑定在vue实例上
1.在src
下创建filters文件夹,并新建index.js文件
2. index.js里面的代码
import moment from 'moment'
const dateFormat = (input, fmtstring) => {
// 使用momentjs这个日期格式化类库实现日期的格式化功能
return moment(input).format(fmtstring);
}
const 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;
}
}
export {
dateFormat,
moneyFormat
}
3. main.js里面添加
import * as filters from './filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
- 在.vue文件中就可以直接使用了
<span>({{item.add_time | dateFormat('YYYY-MM-DD HH:MM:SS')}})</span>
Vue如何封装多个全局过滤器到一个文件的更多相关文章
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- Vue学习笔记【12】——过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由 ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
- Vue全局过滤器的使用 运用在时间过滤 内容添加crud
过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen Vue.filter("msgFo ...
- Vue中全局过滤器期与局部过滤器期的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue注册全局过滤器
1.src目录下创建filter文件 /** * 男女 * @param val * @returns {string} */ const status = val => { let name ...
- Vue定义全局过滤器filter
这里介绍的是多个过滤器一起添加到全局中 1.创建方法 首先src下新建plugin文件夹,用来存放插件. 在plugin文件夹内新建filters.js,编写方法(如隐藏手机号码等等...) /** ...
- vue局部过滤器和全局过滤器
全局过滤器在main.js中写 //注册全局过滤器 Vue.filter('wholeMoneyFormat',(value)=>{ return '¥'+Number(value).toF ...
随机推荐
- HTTP Modules versus ASP.NET MVC Action Filters
from:http://odetocode.com/blogs/scott/archive/2011/01/17/http-modules-versus-asp-net-mvc-action-filt ...
- 【Head First Java 读书笔记】(五)编写程序
第五章 编写程序 伪码:伪码能帮你专注于逻辑而不需要顾虑到程序语法 测试码:测试用的程序代码 真实码:实际代码 伪码 伪码是介于真正的java程序与正常英语之间的一种语言.伪码大致包括3部分:实例变量 ...
- 软工作业WordCount
github项目传送门:https://github.com/zzh010/My-wc 一.WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命 ...
- MongoDB整理笔记の新增Shard Server
1.启动一个新Shard Server 进程 [root@localhost ~]# mkdir /data/shard/s2 [root@localhost ~]# /Apps/mongo/bin/ ...
- 结对作业-WordCount进阶版
1.在文章开头给出博客作业要求地址. 博客园地址:https://www.cnblogs.com/happyzm/p/9559372.html 2.给出结对小伙伴的学号.博客地址,结对项目的码云地址. ...
- 上课总结-数据库Chapter2: 关系数据库
Chapter2: 关系数据库 一.搞懂主键 外键关系 主键(主码):能唯一标识一个元组的某一属性组. 外键:不是这组数据的主键 但是另一组数据的唯一主键(当这组数据的主键有2个时 可以作为外键) 例 ...
- React基础篇 (1)-- render&components
render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...
- Servlet记录
[Servlet]java语言编写动态资源的开发技术,普通的java类 [转发与重定向的区别] 转发在服务器端完成的:重定向是在客户端完成的 转发的速度快:重定向速度慢 转发的是同一次请求:重定向是两 ...
- COCO2018 目标检测
刚浏览了一下coco数据集官网,认真看了一下18年的目标检测任务,简单记录一下. coco2018目标检测挑战赛只进行实例分割的评比,虽然仍然可以输出bbox,但是不可以提交到比赛的服务器,原因是官方 ...
- rest-assured之获取响应数据(Getting Response Data)
我们使用rest-assured可以获得响应内容,比如:我们发起一个get请求 get("/lotto") 并且获得响应内容,我们有多种方式可以实现: // 通过流的方式获得响应内 ...