【溯源篇】从头看vue（八）——过滤器串联及带参

上篇说到：过滤器可以串联及接收参数

过滤器串联及带参示例

javascript">    // 过滤器是 JavaScript 函数，因此可以接收参数
    // 第一个形参str为待处理元素message,第二个形参data1为replace函数传入的第一个参数，以此类推
    Vue.filter('filterA', function(str, data1,data2){
        return str.replace(/\*/g, "你看它颤抖着飞越" + data1 + data2) // 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜
    })

    //  过滤器可以串联,将filterA的结果传递到filterB中
    Vue.filter('filterB ', function(val){
        // data: 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜
        return val.replace(/\#/, "却冰冷的季节")
    })

    var vm = new Vue({
        el: '#app',
        data:{
            message: "你看啊春日的蝴蝶   * # \n "
        }
    })

应用于插值表达式：

<h1>{{ message | filterA(' 和风与暖阳', '倾斜') | filterB  }}</h1>

在这里插入图片描述

关于replace和插值表达式想深入了解的可以看看这篇文章：通过replace看正则表达式

示例完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="UTF-8">javascript"></script>
    <style></style>
</head>
<body>
    <div id="app">
        <h1>{{ message | filterA(' 和风与暖阳', '倾斜') | filterB  }}</h1>
    </div>
</body>
<script>javascript">
    // 过滤器是 JavaScript 函数，因此可以接收参数
    // 第一个形参str为待处理元素message,第二个形参data1为replace函数传入的第一个参数，以此类推
    Vue.filter('filterA', function(str, data1,data2){
        return str.replace(/\*/g, "你看它颤抖着飞越" + data1 + data2) // 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜
    })

    //  过滤器可以串联,将filterA的结果传递到filterB中
    Vue.filter('filterB ', function(val){
        // data: 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜
        return val.replace(/\#/, "却冰冷的季节")
    })

    var vm = new Vue({
        el: '#app',
        data:{
            message: "你看啊春日的蝴蝶   * # \n "
        }
    })
</script>
</html>