Vue过滤器用法(filter)官方文档: https://cn.vuejs.org/v2/guide/filters.

官网上时是这样来介绍的: Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化

我个人是这样认为的: vue过滤器就是用来过滤数据，在显示之前进行数据处理和筛选。

过滤器的使用位置

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 --> 
{{ message | capitalize }} 

<!-- 在 `v-bind` 中 --> 
<div v-bind:id="rawId | formatId"></div>

过滤器语法: Vue.filter('过滤器名称', 处理函数)

定义一个全局过滤器

在main.js中写入

Vue.filter('forMat', (data) => {
    处理数据
    
    return  返回处理的数据
})

简单的来举个例子吧:

我们从后台接收过来的数据不是我们想要的时间格式, 这时我们可以封装一个过滤器, 传入从后端获得过来的数据, 然后处理成我们想要的数据

我们需要将后端传递过来的时间格式转为: 2018-11-2 这样的

在 main.js中封装全局过滤器

Vue.filter('forMat', (data) => {
     var t = new Date(data)  //获取到传过来的数据, 就是管道符 | 前面的数据,处理成标准时间
     // Wed Apr 06 2022 11:18:54 GMT+0800 (中国标准时间)
     var yy = t.getFullYear()   //获得年
     var mm = t.getMonth() + 1  //获得月
     var dd = t.getDate()       //获得日
     return `${yy}-${mm}-${dd}` // 返回拼接好的数据
})

这就是一个简单的过滤器封装了