当我们进行后端接口对接的时候，常常碰到一种情况就是，后端传给我们的数据格式并不是我们想要的，比如后端传给我们时间戳，我们想全局代码转换成统一标准的时间格式，这个时候我们就会使用到过滤器filters
使用
<!-- 在双花括号中 -->
<div>{{ message | capitalize }}</div>
<!-- 在 `v-bind` 中（从 2.1.0+ 开始支持） -->
<div v-bind:id="rawId | formatId"></div>
下面以将首字母小写为例，分别介绍全局过滤器和组件局部过滤器的使用办法
全局过滤器
//main.js
import Vue from 'vue'
Vue.filter('capitalize', (value) => {
if (!value) return ''
value = value.toString()
return value.replace(value[0], value[0].toLowerCase())
})
这样定义之后就可以全局使用了
<!-- 在双花括号中 -->
<div>{{ 'Hello World' | capitalize }}</div> //hello world
组件过滤器
export default {
...
filters: {
// 过滤器，首字母小写
capitalize: function(value) {
if (!value) return "";
value = value.toString();
return value.replace(value[0], value[0].toLowerCase());
}
},
...
}
同样，定义之后可以在当前页面的中使用
<!-- 在双花括号中 -->
<div>{{ 'Hello World' | capitalize }}</div> //hello world
另外，如果我们在将首字母小写之后，还想在前后拼接字符串或者别的元素要怎么办呢？当然可以直接在局部过滤器后面拼接字符串，但是这里要介绍一种新的办法，即串联过滤器。
export default {
...
filters: {
// 过滤器，首字母小写
capitalize: function(value) {
if (!value) return "";
value = value.toString();
return value.replace(value[0], value[0].toLowerCase());
}
len:function (value) {
return 'length = '+value.length;
}
},
...
}
使用的时候格式也不同
<!-- 在双花括号中 -->
<div>{{ 'Hello World' | capitalize | len }}</div> //length = 10
最后要介绍的是过滤器传参，同样以上面的例子打比方。
export default {
...
filters: {
// 过滤器，首字母小写
capitalize: function(value,arg1,arg2) { //注意第一个参数是value
if (!value) return "";
value = value.toString();
return value+' '+arg1+' '+arg2;
}
},
...
}
使用
<!-- 在双花括号中 -->
<div>{{ 'Hello World' | capitalize('My','Girl') }}</div> //Hello World My Girl
