Vue过滤器

定义：

        对要显示的数据进行特定格式化后再显示（适用于一些简单路基的处理）。

语法：

1. 注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})。
2. 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性=‘xxx | 过滤器名’

备注：

1. 过滤器也可以收集额外的参数（前面写的参数在第一个位置），多个过滤器也可以串联，
2. 并没有改变原来的数据，是产生新的对应的数据。

例子 

<div id="root">
    <!-- 过滤器实现 -->
    <h1>当期时间：{{time | curTime}}</h1>
    <br>
    <!-- 过滤器传参，time会永远当做第一个参数传递 -->
    <h1>当期时间：{{time | curTime('YYYY_MM_DD')}}</h1>
    <br>
    <!-- 多个过滤器：参数会先传到过滤器一，然后会吧过滤器一的返回值作为参数传给过滤器二 -->
    <h1>当期时间：{{time | curTime('YYYY_MM_DD') | mySlice}}</h1>

    <h1>当期时间：{{time | curTime('YYYY_MM_DD') | latterSlice}}</h1>

    
    <input type="text" :value="'helleWorld' | latterSlice">

</div>
<script type="text/javascript">
    
    // 设置全局的过滤器，必须在new Vue之前设置
    Vue.filter("latterSlice", function (val) {
        return val.slice(0, 2);
    })

    new Vue({
        el: "#root",
        data: {
            time: 1656595402181
        },
        filters: {
            curTime(value, str = "YYYY年MM月DD日 HH:mm:ss") {
                return dayjs(value).format(str);
            },
            mySlice(value) {
                return value.slice(0, 4);
            }
        }
    })
</script>