vue filter 过滤器

vue filter过滤器简单介绍一下，就是把一个数经过过滤器之后变换出来的另一种方式呈现，比如时间的格式化，或者添加一些装饰之类的等。

过滤器分为两种：一种全局过滤器；另一种是局部过滤器

1，全局过滤器

1，在 mian.js 中定义全局过滤器

Vue.filter('allFilter',function(val){
  return val + '我是全局过滤器'
})

2，在其他的页面中调用

{{ value  | allFilter }}

展示：

image.png

注：如果过滤器定义的比较多时，我们可以单独建立一个文件，之后把这个文件引入到 main.js 中的即可

2，局部过滤器

1，在定义局部过滤器页面中定义

export default {
  props: ["dir"],
  data() {
    return { };
  },
 filters: {
    allFilter(val) {
      return val + "我是局部过滤器";
    }
  }
};

2，在其他的页面中调用

{{ value  | allFilter }}

展示：

image.png

3，过滤器传参

注：如果是文字之类的，也可以用过滤器替换其中的一些词
案例是全局过滤器，局部过滤器同理

Vue.filter('msgformat',function( msg, value ){
//字符串  replace 方法，第一个参数，除了写一个 字符串之外，还可以定义一个正则，g修饰符表示全局匹配
    return msg.replace(/单纯/g, value )
})

页面中调用

{{ msg | msgformat('美丽') }}

export default {
  props: ["dir"],
  data() {
    return {// 把 msg 里面的 单纯 变为 美丽
        msg:'我是一个单纯的少女，单纯的我，傻傻地问，世界上谁才是最单纯的人'
     };
  },
}

展示：

image.png

注：过滤器可以传递多个参数

Vue.filter('msgformat',function( msg, value1，value2 ){
//字符串  replace 方法，第一个参数，除了写一个 字符串之外，还可以定义一个正则，g修饰符表示全局匹配
    return msg.replace(/单纯/g, value1+value2 )
})

{{ msg | msgformat('美丽'，'123') }}

展示：

image.png

过滤器还可以进行叠加使用

// 在main.js 定义两个全局过滤器
Vue.filter('allFilter',function(msg,value1,value2){
  return msg.replace(/单纯/g, value1+value2 )
})

Vue.filter('allFilter2',function(msg,value1){
  return value1+ '!!!'
})

// 页面中调用
{{ msg | allFilter('美丽','123') | allFilter2(msg)}}

同理，局部过滤器也是同样的方法

以上就是过滤器的用法
补充：时间格式化

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'
    //return 'yyyy+mm+dd'
    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
      return `${y}-${m}-${d}`  //这个的引号是 反引号，在键盘1的左边
    } else {
      var hh = dt.getHours()
      var mm = dt.getMinutes()
      var ss = dt.getSeconds()

      return `$(y)-$(m)-$(d) $(hh):$(mm):$(ss)`
    }

  })

我写了一个简单的 vue 这方面的 dome，链接：https://github.com/zhongmin2011/vue-dome