管道

不知道为什么官网给这个功能起名叫filter（过滤器），angular2里叫做pipe（管道）。管道这个概念，在Linux的shell里就有，非常形象生动，可能因为Vue是仿照angular1设计的，但是叫“过滤器”根本不明所以。

注：说实话管道比较少用，处理数据我们一般在绑定数据的位置用computed计算属性完成，不知道这个特性以后会不会移除。

管道的定义和使用

Vue2中没有自带的管道，但是自定义管道并不困难。

<body>
<div id="app">
    {{s | trim | capitalize}}
</div>
<script>
    Vue.filter('trim', function (value)
    {
        return value.trim();
    });
    Vue.filter('capitalize', function (value)
    {
        return value.charAt(0).toUpperCase() + value.slice(1);
    });

    let app = new Vue({
        el: "#app",
        data: {
            s: "  hello",
        },
        methods: {}
    });
</script>
</body>

上面代码中，定义了两个管道，trim和capitalize，分别实现字符串头尾去空格，和首字母大写。和angular一样，多个管道可以串联使用，非常简单。

向管道处理器传参数

<body>
<div id="app">
    {{i | currency("¥")}}
</div>
<script>
    Vue.filter('currency', function (value, symbol)
    {
        return value + symbol;
    });

    let app = new Vue({
        el: "#app",
        data: {
            i: 100
        },
        methods: {}
    });
</script>
</body>

上面代码实现了一个加上货币符号的功能，注意定义管道时的写法，函数中第一个参数是管道要操作的数据，第二个是后面带的参数。

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。