1、公有过滤器

定义：Vue.filter('过滤器名称', function (dataStr, ……) {})

Vue.filter有两个参数，第一个是过滤器的名称，第二个是一个函数，函数的第一个参数是使用过滤器本身这个数据，之后还可以定义多个形参

调用方式：{{ msg | 过滤器名称1(形参……) }}

2、私有过滤器

定义：filters{'过滤器名称1':function (dataStr, ……) {},'过滤器名称2':function (dataStr, ……) {}}

私有过滤器放在vue实例的filters属性中，filters里面可以定义多个私有过滤器，私有过滤器函数的参数和公有过滤函数一样

调用方式：{{ msg | 过滤器名称1(形参……) }}

示例代码如下：这个示例是一个时间格式标准显示的过滤器，运行下面的代码在控制台中会一个错误

[Vue warn]: Failed to resolve filter: timeFormat

这是因为我们在app的vue作用域中去调用了app2的vue作用域中的私有过滤器，错误也证明了私用过滤器是不能给外部调用的。

<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</hred>
<div id="app">
    <h4>{{nowDate}}</h4>
    <h4>{{nowDate | datetimeFormat}}</h4>
    <h4>{{nowDate | datetimeFormat('yyyy-mm-dd hh:mm:ss')}}</h4>
    <h4>{{nowDate | timeFormat}}</h4>
</div>
<hr />
<div id="app2">
    <h5>{{new Date() | datetimeFormat('yyyy-mm-dd hh:mm:ss')}}</h5>
    <h5>{{new Date() | timeFormat}}</h5>
</div>
<script type="text/javascript">
    Vue.filter('datetimeFormat', function (dateStr, pattern = "yyyy-mm-dd") {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDay().toString().padStart(2, '0')
        if (pattern.toLowerCase() == "yyyy-mm-dd") {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            nowDate: new Date()
        },
        methods: {}
    })
    var vm2 = new Vue({
        el: "#app2",
        filters: {
            datetimeFormat: function (dateStr, pattern = "yyyy-mm-dd") {
                var dt = new Date(dateStr)
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDay().toString().padStart(2, '0')
                return `${y}-${m}-${d}`
            },
            timeFormat: function (timeStr) {
                var dt = new Date(timeStr)
                var hh = dt.getHours().toString().padStart(2, '0')
                var mm = dt.getMinutes().toString().padStart(2, '0')
                var ss = dt.getSeconds().toString().padStart(2, '0')
                return `${hh}:${mm}:${ss}`
            }
        }
    })
</script>

</html>

3、其它知识点

①模板字符串：`${y}-${m}-${d} ${hh}:${mm}:${ss}`有些繁琐的字符拼接我们可以使用模板字符串来简化它，比如示例中的日期格式，用${变量}定义模板，模板要用``符号包裹，注意不是单引号''哦！

②toUpperCase() 将字符串全部变成大写和 toLowerCase() 将字符串全部变成小写

③padStart() ES6中新增的方法，补全字符串的位数，示例中padStart(2,'0')表示的就是这个字符串有两位，如果不满两位就用'0'往前补全，padEnd(2,'0')则是往后用'0'补全

④在ES6中函数的参数是可以给定默认值的，在 function (dateStr, pattern = "yyyy-mm-dd") 中我们就给形参 pattern 添加了默认值"yyyy-mm-dd"

⑤两个vue实例中的数据、方法、属性是不能相互调用的

⑥如果私有过滤器和公有过滤器的名称相同的话，优先调用的是私有过滤器

⑦js中获取日期的月份是从0开始的，所以显示日期时记得要加1