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

最新推荐文章于 2022-11-21 11:16:57 发布

小鱼小鱼干

最新推荐文章于 2022-11-21 11:16:57 发布

阅读量283

点赞数

分类专栏： vue基础教程【单页面示例】文章标签：过滤器 vue filter javascript

本文链接：https://blog.csdn.net/weixin_43361722/article/details/116233930

版权

vue基础教程【单页面示例】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

过滤器串联及带参示例

    // 过滤器是 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"></script>
    <style></style>
</head>
<body>
    <div id="app">
        <h1>{{ message | filterA(' 和风与暖阳', '倾斜') | filterB  }}</h1>
    </div>
</body>
<script>
    // 过滤器是 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>

小鱼小鱼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【溯源篇】从头看vue（八）——过滤器串联及带参

上篇说到：过滤器可以串联及接收参数 // 过滤器是 JavaScript 函数，因此可以接收参数 // 第一个形参str为待处理元素message,第二个形参data1为replace函数传入的第一个参数，以此类推 Vue.filter('filterA', function(str, data1,data2){ return str.replace(/\*/g, "你看它颤抖着飞越" + data1 + data2) // 你看啊春日的蝴蝶你看它颤抖着飞越和风
复制链接

扫一扫