过滤器用于 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
Vue 中已经移除了过滤器，可以使用计算属性代替。所以本章节了解即可。
在 BootCDN 开源网站中下载 Day.js 日期处理插件：
接下来我们要做一个时间戳转换日期的示例，借助 day.js 插件更方便一些。
BootCDN网址：[https://www.bootcdn.cn/]
BootCDN中有很多开源插件，在这只是用 day.js 举例，其他插件的使用方法都一样。
首先复制第一个链接：
在网页中打开链接，鼠标右键点击另存为，将文件存到项目目录中使用。
打卡 GitHub 仓库查看使用方法：
选择简体中文，下滑查看使用方法：
在项目中引入 day.js 日期处理插件：
然后 用计算属性实现日期显示：
<div id="APP"> <p>现在是：{{fmtTime}}</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, computed:{ fmtTime(){ return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss'); } } });
备：dayjs 是 day.js 插件中提供的方法，如果不传递参数，默认转换当前时间。format 方法用于指定显示格式。
局部过滤器实现：
<div id="APP"> <p>现在是：{{time | timeFormater}}</p> </div>
过滤器使用格式：{{ 原始数据 | 过滤方法 }}
const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, filters:{ timeFormater(value){ return dayjs(value).format('YYYY-MM-DD HH:mm:ss'); } } });
备：过滤方法需要在 filters 中定义，自动将原始数据作为参数传入方法中，定义 value 接收即可使用。
过滤器传参：
<div id="APP"> <p>现在是：{{time | timeFormater('YYYY-MM-DD')}}</p> </div>
过滤方法可以传递参数，格式：{{ 原始数据 | 过滤方法（参数1，参数2） }}
const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, filters:{ timeFormater(value,str){ return dayjs(value).format(str); } } });
注：接收参数时，第一个永远是原始数据。
使用多个过滤器：
<div id="APP"> <p>现在是：{{time | timeFormater | mySlice}}</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, filters:{ timeFormater(value){ return dayjs(value).format('YYYY-MM-DD HH:mm:ss'); }, mySlice(value){ return value.slice(0,4); } } });
注：过滤器是可以使用多个的，后一个过滤方法的 value 就是前一个过滤的结果。
绑定属性时使用过滤器：
<div id="APP"> <p :data="time | timeFormater" >现在是：{{time | timeFormater}}</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, filters:{ timeFormater(value){ return dayjs(value).format('YYYY-MM-DD HH:mm:ss'); } } });
注：在 v-bind 绑定属性时，也可以使用过滤器，语法一致。
使用全局过滤器实现：
<div id="APP"> <p>现在是：{{time | timeFormater | mySlice}}</p> </div>
// 全局过滤器语法格式：Vue.filter(方法名, 回调函数); Vue.filter('mySlice',function(value){ return value.slice(0,4); }) const vm = new Vue({ el: "#APP", data(){ return { time: 1674540823451 } }, filters:{ timeFormater(value){ return dayjs(value).format('YYYY-MM-DD HH:mm:ss'); } } });
注：全局过滤器一般用于组件式开发中，它可以在任意一个 Vue 实例中使用。
原创作者：吴小糖
创作时间：2023.3.22
