Vue：过滤器

过滤器:是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

全局过滤器

下面定义一个全局过滤器，用于在数据前加上大写的VUE。需要注意的是，全局过滤器定义必须始终位于Vue实例之上，否则会报错。

<div id="app">
    {{message | toAdd}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter("toAdd", function(value) {
        return 'VUE' + value
    })
    var demo = new Vue({
        el: '#app',
        data: {
            message: '过滤器',
        }
    })
</script>

注意：

1. Vue.filter() 后有两个参数：过滤器名，过滤器处理函数。
2. 过滤器处理函数也有一个参数：要过滤的数据。

上面这个代码通过过滤器我们就实现了在massage前面加上’VUE’，至于其作用可以用下面例子展现出来，例如有n多个msg数据，都要在其前面加上’Vue’,手动的去完成是不可能实现的，这个时候过滤器就可以帮我们完成这个任务了。

局部过滤器

<div id="app">
    <p>{{message | Reverse}}</p>
	  <p>{{message | Length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var demo = new Vue({
        el: '#app',
        data: {
            message: '过滤器',
        },
        filters: {
            Reverse: function(value) {
                if (!value){
                    return '';
                } 
                return value.toString().split('').reverse().join('');
            },
            Length: function(value) {
                return value.length;
            },
        },
    })
</script>

局部过滤器定义在Vue对象里面，作为filters属性中的函数，只有该vue对象可以使用，并且可以注册多个过滤器存储在其中。

过滤器传参

<div id="app">
    {{msg1 | toDou(1,2)}}
	  {{msg2 | toDou(10,20)}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter('toDou', function(value, param1, param2) {
        if (param2 < 10) {
            return value + param1;
        } else {
            return value + param2;
        }
    });
    new Vue({
        el: '#app',
        data: {
            msg1: 9,
            msg2: 12,
        }
    });
</script>

注意：过滤器处理函数的第一个参数，仍然是要过滤的数据。从第二个参数开始，才是过滤器本身要传递的参数。

串联过滤器

<div id="app">
    {{money | prefix | suffix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter("prefix", function(value) {
        return '￥' + value
    })
    Vue.filter("suffix", function(value) {
        return  value + '元'
    })
    var demo = new Vue({
        el: '#app',
        data: {
            money:10
        }
    })
</script>