vue过滤器

使用场景：加工属性，对属性做一些类似格式化的操作但不会改变该属性；看起来跟computed类似，后面总结两者区别
使用地方：可以放在{{}}插值中使用，也可以在v-bind表达式中使用(vue2.1.0+支持)
注意事项：过滤器中this不能获取vue实例

全局过滤器：

//main.js
Vue.filter('filterFun', function (value) {
  return "¥" + value;
})

局部过滤器：

//vue文件中
...
  data(){},

 filters: {
    filterFun(value) {
      return "¥" + value;
    }
  }
...

使用:

//普通
{{ value|filterFun }}
//传参  此时filterFun被定义为接收三个参数的过滤器函数。
//其中 value 的值作为第一个参数，arg1作为第二个参数，arg2作为第三个参数。
{{value|filterFun(arg1,arg2)}}
...
filters: {
    filterFun(value,arg1,arg2) {
      return  value+arg1+arg2;
    }
  }

filter和computed区别：

1. 计算属性：

• 依赖于一个固定的vue实例 ，要在某一个实例中使用
• 有缓存管理机制，可减少页面调用次数
• 计算属性虽默认为只读，但可以使用setter和getter开启可读可写模式
• 计算属性被作为一个类属性调用
• 不能和data属性重名
• 能通过this获取到实例

2. 过滤器：

• 不依赖于实例。可以定义一个全局过滤器，在多个实例中使用
• 无缓存机制，调用次数取决于页面中有所多少过滤器
• 只能读取操作
• 过滤器被作为一个特殊方法处理
• 不能通过this获取到实例

不管是过滤器还是computed都要有返回值哦！