目录
概念一、 私有过滤器1.html2.私有 `filters` 定义方式： 二、全局过滤器定义全局过滤器概念
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。
一、 私有过滤器
在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
1.html
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
2.私有filters定义方式：
filters: {// 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用dataFormat(input, pattern = "") {// 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}}}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；
二、全局过滤器
Vue.fliter(‘过滤器名字’,回调函数) 回调函数中做的是业务逻辑
定义全局过滤器
// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') {var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}});
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
如果觉得《Vue过滤器之 过滤时间 (时间过滤器)》对你有帮助，请点赞、收藏，并留下你的观点哦！
