Vue过滤器

    
        
        
        
        
        
    
    
        
        
            {{msg |msgFormat}}
        
    
    

使用Vue.filter()来对指定的元素进行过滤，function中传递的参数即是el表达式中的第一个值，

同时还可以传递多个参数

    
        
        
        
        
        
    
    
        
        
            {{msg |msgFormat('讨论')}}
        
    
    

同时可以进行多次过滤

    
        
        
        
        
        
    
    
        
        
            {{msg |msgFormat('讨论')|test}}
        
    
    

实际中经常会使用到的实例

  Vue.filter('dateFormat', function (dateStr, pattern = "") {      // 根据给定的时间字符串，得到特定的时间
      var dt = new Date(dateStr)      //   yyyy-mm-dd
      var y = dt.getFullYear()      var m = dt.getMonth() + 1
      var d = dt.getDate()      // return y + '-' + m + '-' + d



      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}`
      }
    })

同时如果页面中存在两个Vue对象，针对每个对象可以定义私有过滤器，如下

    // 如何自定义一个私有的过滤器（局部）
    var vm2 = new Vue({      el: '#app2',      data: {        dt: new Date()
      },      methods: {},      filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
        // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
        dateFormat: function (dateStr, pattern = '') {          // 根据给定的时间字符串，得到特定的时间
          var dt = new Date(dateStr)          //   yyyy-mm-dd
          var y = dt.getFullYear()          var m = (dt.getMonth() + 1).toString().padStart(2, '0')          var d = dt.getDate().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} ~~~~~~~`
          }
        }
      },

作者：镇屌要逆袭
链接：https://www.jianshu.com/p/60fcfbdc9ad2