过滤器

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

过滤器分全局过滤器和局部过滤器（本地过滤器）

全局过滤器

下面定义一个全局过滤器，用于在数据前加上大写的 VUE 字符串。

需要注意的是，全局过滤器定义必须始终位于Vue实例之上，否则会报错。

Vue.filter() 后有两个参数：过滤器名，过滤器处理函数。

过滤器处理函数也有一个参数：要过滤的数据。

<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>

局部过滤器

局部过滤器也可以称为本地过滤器

本地过滤器存储在Vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。

<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>

过滤器传参

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

<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>