假设场景：将长度单位厘米转化为米。
若传来的数据如图所示，要将其中的数字转化为米。那在没有过滤器的情况下，需要我们循环 lengthArr 数组，将原数据转化为具体需要的数据。而 Vue 提供了过滤器，可以让这问题得以更好的解决。
过滤器（filter）的作用
- 在不改变 data 的情况下，只改变渲染的结果，得到渲染后的结果。
- 在处理前端数据格式时，保持响应的干净。
使用方式
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
自定义过滤器
定义过滤器有两种方式。第一种是全局过滤器，它可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用。当全局过滤器和局部过滤器重名时，会采用局部过滤器。
全局定义
html部分
{{ message | capitalize }} // capitalize 为过滤器的名字
js部分
Vue.filter('capitalize'，function(data){
....
})
1、在 Vue.filter('capitalize'，function(data){}) 中，第一个参数是过滤器的名字，第二个参数是过滤器的功能函数。
2、在功能函数 function(data){} 中，参数可以有多个，第一个参数是传入的要过滤数据，即原数据。第二个参数开始就是html调用过滤器的时候传入的参数。
局部定义
html部分
{{ message | capitalize }} // capitalize 为过滤器的名字
js部分
filters:{
capitalize：function (data){
...
}
}
例子：
html代码
<div class="demo">
<p v-for="item in lengthArr">{{item.millimeter}}mm ==> {{item.millimeter | meterChange}}</p>
</div>
js代码
Vue.filter('meterChange', function(val, unite) {
val = val/1000 || 0;
if(val) {
unite = 'm';
return val + unite
}
return
});
new Vue({
el: ".demo",
data: {
lengthArr: [
{millimeter: 10000},
{millimeter: 1000},
{millimeter: 100},
],
}
})
效果：
