Vue过滤器

假设场景：将长度单位厘米转化为米。

若传来的数据如图所示，要将其中的数字转化为米。那在没有过滤器的情况下，需要我们循环 lengthArr 数组，将原数据转化为具体需要的数据。而 Vue 提供了过滤器，可以让这问题得以更好的解决。

过滤器（filter）的作用

1. 在不改变 data 的情况下，只改变渲染的结果，得到渲染后的结果。
2. 在处理前端数据格式时，保持响应的干净。

使用方式

<!-- 在双花括号中 -->
{{ 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},
            ],
        }
})

效果：