过滤器:

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

过滤器调用时候的格式:

{{ name | 过滤器的名称 }}

过滤器的定义语法:

Vue.filter('过滤器的名称', function (data) { return data + '123' })
[过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据]

过滤器的基本使用（demo）：

<div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div>

 <script>
// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
  // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
  return msg.replace(/单纯/g, arg + arg2)
})
//可多次调用
Vue.filter('test', function (msg) {
  return msg + '========'
})


// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  },
  methods: {}
});
</script>

输出结果：
曾经，我也是一个疯狂+1123的少年，疯狂+1123的我，傻傻的问，谁是世界上最疯狂+1123的男人========

---

全局过滤器与全局私有过滤器:

全局过滤器(demo)：

         // 全局的过滤器， 进行时间的格式化
        // 所谓的全局过滤器，就是所有的VM实例都共享的
         Vue.filter('dataFormat', function (dateStr, pattern = "") {
            // 根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr)
            //   yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

调用：

<td>{{ item.ctime | dataFormat }}</td>

注意：

当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

私有过滤器:

image.png
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
调用：

    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器