vue过滤器（八）
栏目: JavaScript · 发布时间: 7年前
内容简介：使用一个项目中，可能要用到很多过滤器来处理数据，多个组件公用的，可以注册全局过滤器。单个组件使用的，就挂载到实例
// 第一个参数表示：过滤器的名称
// 第二个参数表示：函数，使用过滤器的时候，这个函数中的代码会被执行
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
})
例子
Vue.filter('date', function (input, format = 'yyyy-MM-dd hh:mm:ss'）{
var o = {
"M+": input.getMonth() + 1, //月份
"d+": input.getDate(), //日
"h+": input.getHours(), //小时
"m+": input.getMinutes(), //分
"s+": input.getSeconds(), //秒
"q+": Math.floor((input.getMonth() + 3) / 3), //季度
"S": input.getMilliseconds() //毫秒
};
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (input.getFullYear() + "").substr(4 - RegExp.$1.length));
// 不够2位的前面补0
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return format;
})
使用
<h1>{{item.time | date('yyyy-MM-dd hh:mm:ss')}}</h1>
一个项目中，可能要用到很多过滤器来处理数据，多个组件公用的，可以注册全局过滤器。单个组件使用的，就挂载到实例 filters 中。项目做的多了以后，可以整理一套常用的 filters ，不用反复的写。比如：时间等各种操作，数据格式转化，单位换算，部分数据的 md5 加密等…
创建一个filters专门放各种过滤器
filter.js
main.js
页面上直接用 ’｜过滤器名‘ 即可
或者直接在 main.js 中直接自定义全局过滤器
二、局部过滤器
在某一个vue实例的内创建的，只在当前实例中起作用
new Vue({
data:{
},
// 通过 filters 属性创建局部过滤器
// 注意：此处为 filters
filters: {
filterName: function(value, format) {}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数学之美 （第二版）
吴军 / 人民邮电出版社 / 2014-11 / 49.00元
几年前，“数学之美”系列文章原刊载于谷歌黑板报，获得上百万次点击，得到读者高度评价。读者说，读了“数学之美”，才发现大学时学的数学知识，比如马尔可夫链、矩阵计算，甚至余弦函数原来都如此亲切，并且栩栩如生，才发现自然语言和信息处理这么有趣。 在纸本书的创作中，作者吴军博士几乎把所有文章都重写了一遍，为的是把高深的数学原理讲得更加通俗易懂，让非专业读者也能领略数学的魅力。读者通过具体的例子学到的......一起来看看 《数学之美 （第二版）》 这本书的介绍吧!
