过滤器filter

Vue. 支持在{ { } }插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义 的，
通过给 Vue 实例添加选项 filters 来设置 过滤器：{{ data | filter1 |filter2}} {{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和 第三个参数

//数据和过滤器名字用管道符 | 分隔
//因为在 Vue 实例中注册了过滤器，插值的时候只要写上过滤器名字即可
{{date | 过滤器名字}}
//过滤器串联
//注意：过滤器串联时，filters 对象里面要写多个过滤器
{{date | filters1 | filters2}}
//过滤器传参
{{date | filtratorDate(66,99)}}
filters: {
    filtratorDate: function (value, a, b) {
        return a + b
    }//(66+99) 165
66对应 过滤器参数a
99对应 过滤器参数b
value 对应 date

div id="app">
    {{date}}<br>
    {{date | filtratorDate}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //需求：在页面中实时显示当前时间
    let app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            filtratorDate: function (value) {
                const date = new Date(value);
                const year = date.getFullYear()
                const month = date.getMonth()
                const day = date.getDate()
                const hours = date.getHours()
                const min = date.getMinutes()
                const seconds = date.getSeconds()
                return year + '年' + month + '月' + day + '日' + hours + '时' + min + '分' + seconds + '秒'
            }
        },
        mounted: function () {
            let _this = this; //this 代表 Vue 实例
            //setInterval()定时器
            this.timer = setInterval(function () {
                _this.date = new Date()
            }, 1000)
        },
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval()
            }
        },
    });
</script>