vue过滤器

概念：可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

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

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

作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值

分类：过滤器分为两种，一种是单个组件的过滤器，也叫做局部过滤器，

一种是vue实例的全局过滤器，它可以被应用在任何地方。

使用语法：

• {{变量 | 过滤器名}}

• {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法：

全局过滤器

Vue.filter( filterName，( )=>{ return // 数据处理结果 } )

参数：1.过滤器的名字  2.过滤器执行函数

Vue.filter('dateFormat', function (data, format) {
    // 日期格式化
    console.log(format);
    // 转成date对象
    let time = new Date(data);
    // 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
    let y = time.getFullYear();
    // 这里需要注意的地方，月份是从0开始排序的
    let m = (time.getMonth() + 1).toString().padStart(2, '0');
    // getDay应该是获取了星期几
    // getDate获取日期
    let d = time.getDate().toString().padStart(2, '0');
    // console.log(y);
    // console.log(m);
    // console.log(d);
    if (format == 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
    } else {
        // 获取时分秒
        let h = time.getHours().toString().padStart(2, '0');;
        let min = time.getMinutes().toString().padStart(2, '0');;
        let secondes = time.getSeconds().toString().padStart(2, '0');;

        return `${y}-${m}-${d} ${h}:${min}:${secondes}`;
    }
})

私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

new Vue({
    el: '#app',
    filters: {
        dateFormat(data, format) {
            ...
        }
    }
});

• 注意事项

1. 函数的第一个参数都是data，也就是我们要过滤的值。

2. 过滤器可以自定义一些参数。

3. 过滤器函数的返回值就是最终显示的值