1. 定义

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。即对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）

2. 注册和使用

1）全局注册和局部注册

//全局注册
Vue.filter(name, callback)

//局部注册
new Vue({ filters: {}})

2）使用

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

{{ xxx | 过滤器名 }} 
//或
<div v-bind:属性="xxx | 过滤器名"></div>

例如：对一个时间戳格式化后再显示到页面上（这里不手写格式化逻辑，直接使用dayjs）

<div id='root'>
    <!-- 默认 -->
    <h3>现在是：{{ time | timeFormatter }}</h3>
    <!-- 传参 -->
    <h3>现在是：{{ time | timeFormatter('YYYY_MM_DD') }}</h3>
    <!-- 多个过滤器串联 -->
    <h3>现在是：{{ time | timeFormatter('YYYY_MM_DD') | sliceStr}}</h3>
</div>
<script>
    //过滤器（全局）
    Vue.filter('sliceString', function(value) {
        return value.slice(0,4)
    });

    new Vue({
        el: '#root',
        data: {
            time: 1711457332829
        },
        // 过滤器（局部）
        filters: {
            timeFormatter(value, str = 'YYYY-MM-DD HH:mm:ss') {
                console.log(value);
                return dayjs(value).format(str);
            },
            sliceStr(value) {
                return value.slice(0,4);
            }
        }
    });
</script>

默认：过滤器函数总接收表达式的值作为第一个参数。在上述例子中，timeFormatter过滤器函数将会收到 time 的值作为第一个参数。

传参：这里，timeFormatter被定义为接收两个参数的过滤器函数。其中 time 的值作为第一个参数，普通字符串 'YYYY_MM_DD' 作为第二个参数。

多个过滤器串联：timeFormatter被定义为接收两个参数的过滤器函数，表达式 time 的值将作为参数传入到函数中。然后继续调用被定义为接收单个参数的过滤器函数 sliceStr，将 timeFormatter的结果传递到 sliceStr 中。

备注：

• 当全局过滤器和局部过滤器重名时，会采用局部过滤器。
• 过滤器也可以接受参数，多个过滤器也可以串联。
• 并没有改变原来的数据，是产生新的对应的数据。