Vue中自定义过滤器，可被用于一些常见的文本格式化。添加在js表达式的尾部。

过滤器使用：

• {{message || filterA ('arg1' , args) }}
  • filterA：接收三个参数的过滤器，message为第一个参数
  • 普通字符串 'arg1' 作为第一个参数，表达式 'arg2' 的值作为第三个参数
• 标签内部 v-bind:id = " rawId | formatId "

过滤器定义方式：

组件内定义：

filter:{capitalize: function(value){//...内容}
}

Vue实例创建前全局定义

Vue.filter('capitalize', function(value){//...返回一个值
})new Vue({//...
})

获取到api中的图片地址之后，将图片地址中的/w.h/转换成自定义的宽和高。

'setWH' -方法名

url - api地址

arg -自己的参数

url.replace(/w\.h/, arg);  -直接替换，\.转义，点在正则中是匹配除换行符以外的任何单个字符

//main.js
Vue.filter('setWH', (url , arg ) => {return url.replace(/w\.h/ , arg );
});

应用过滤器：

item.img - 当前图片的url

setWH(128.180) - 过滤器设置图片大小

//HTML
<img :src = "item.img | setWH( 128.180 )">