Vue过滤器的使用

官方文档

1.作用：

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

2.使用位置：

双花括号插值和 v-bind 表达式，由管道符号 | 表示

3.使用语法：

1. {{变量 | 过滤器名}}
2. {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
   3.v-bind：属性=“变量名|过滤器名”

4.定义语法：

1.全局定义
Vue.filter(’过滤器名’，执行的函数)
2.局部定义
filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器
filters:{ 过滤器名：执行的函数)}
3.注意事项
函数的第一个参数都是data，也就是我们要过滤的值。
过滤器可以自定义一些参数。
过滤器函数的返回值就是最终显示的值

5.过滤器格式化日期案例

 filters: {
// 过滤器可以接受参数,我们可以根据参数的不同返回不同的结果,format为自定义参数
                dateFormat(data, format) {
                    let time = new Date(data);
                    // 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
                    let y = time.getFullYear();
                    // 这里需要注意的地方，月份是从0开始排序的
                    let m = (time.getMonth() + 1).toString().padStart(2, '0');
                    // getDate获取日期
                    let d = time.getDate().toString().padStart(2, '0');
                    if (format == 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        // 获取时分秒
                        let hour = time.getHours().toString().padStart(2, '0');;
                        let minute = time.getMinutes().toString().padStart(2, '0');;
                        let second = time.getSeconds().toString().padStart(2, '0');;

                        return `${y}-${m}-${d} ${hour}:${minute}:${second}`;
                    }

                }
            }

额外知识

1.padStart()
这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
这个方法里两个参数

• 显示的位数
• 位数不足时在前面补充的内容

2. padEnd()
   和上面用法一样，这个是在后面补一个值