Vue 全局过滤器和私有过滤器

全局过滤器

<div id="app">
    <p>{{ msg | msgFormat }}</p>    <!-- msgFormat为过滤器名称 -->
</div>
<script>
    // function的第一个参数已经规定死了，永远是过滤器管道符“|”前面传递过来的数据
    Vue.filter('msgFormat', function(msg) {
        return msg.replace(/葡萄/g,'柚子')  //   /g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个
    })
   var vm = new Vue ({
       el: '#app',
       data: {
           msg: '吃葡萄不吐葡萄皮'
       }
   })
</script>

注1

过滤器名称后面也可以传递参数，且可以传递多个

<div id="app">
    <p>{{ msg | msgFormat('西瓜','香蕉') }}</p>   
</div>

Vue.filter('msgFormat', function(msg, arg1, arg2) {
        return msg.replace(/葡萄/g, arg1+arg2)  
    })

注2

可以同时调用多个过滤器

<div id="app">
    <p>{{ msg | msgFormat('西瓜','香蕉') | tail}}</p>    
</div>
<script>
    Vue.filter('msgFormat', function(msg, arg1, arg2) {
        return msg.replace(/葡萄/g, arg1+arg2)  
    })
    Vue.filter('tail', function(msg) {
        return msg + '哈哈哈'
    })
   var vm = new Vue ({
       el: '#app',
       data: {
           msg: '吃葡萄不吐葡萄皮'
       }
   })
</script>

私有过滤器 （时间格式化案例）

<div id="app2">
    <h3>{{  dt | dateFormat}}</h3>   //调用过滤器采用就近原则，若私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器。另外，全局过滤器是所有的VM实例共享的
</div>
<script>
    var vm = new Vue ({
        el: '#app2',
        data: {
            dt: new Date()
        },
        methods: {},
        filters: {
            dateFormat: function(dateStr, pattern='') {
                // 根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)
                
                var y = dt.getFullYear()
                var m = dt.getMonth() +1
                var d = dt.getDate()

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours()
                    var mm = dt.getMinutes()
                    var ss = dt. getSeconds()

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            }
        }
    })
</script>