Vue过滤器

前言：高大上的管道符

开发中，总能看到一句很是高大上的代码

当前月份：{{date | dateFormat}}

全局搜索了下，发现dateFormat是一个方法；
通过这么一句代码，页面上就可以显示时间的格式化字符串；
那这个|到底是什么东西呢？
其实很简单：它是vue中的过滤器。

一、过滤器

• vue可自定义过滤器，可用于常见文本的格式化
• 过滤器只可用在双花括号插值和 v-bind 表达式
• 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{date | dateFormat}}

二、定义一个过滤器

<template>
  <div id="app">
    <div>
      当前时间：{{date | format}}
    </div>
    <div>
      当前月份：{{date | dateFormat('YYYY-MM')}}
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: 'App',
  data() {
    return {
      date: new Date
    }
  },
  filters: {
    format(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
    dateFormat(value, format) {
      return moment(value).format(format);
    }
  }
}
</script>

1. 定义过滤器

在filters直接添加过滤器方法

2.过滤器方法参数

过滤器方法是一个js函数，可接收参数；
其中，第一个参数是表达式的值(花括号中date的值)，后面的参数才是写到括号中的参数；

过滤器也可连写，对字符串进行多次格式化：{{message | filterA | filterB}}

三、全局的过滤器

可以在main.js文件中，注册全局的过滤器；

Vue.filter('dateFormat', (value, format) => {
  return moment(value).format(format);
})

插件的一种实现方式，就是通过过滤器实现的；