图片api自定义宽高调用 -filter

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

过滤器的使用：

• {{message || filter('arg1','arg2')}}
  • 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 )"