Vue之自定义过滤器的创建和使用

最新推荐文章于 2024-09-03 21:55:29 发布

MZ小白

最新推荐文章于 2024-09-03 21:55:29 发布

阅读量351

点赞数

分类专栏： vue 文章标签： Vue之自定义过滤器的创建和使用

本文链接：https://blog.csdn.net/XLGKXSH/article/details/99451394

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue之自定义过滤器的创建和使用

作用：实现数据的筛选，过滤，格式化。

1.过滤器创建（过滤器的本质是有一个参数，有返回值的方法）

<body>
    <div id="container">
        <h1>{{msg}}</h1>

        <h1>{{price}}</h1>
        <h1>{{price|myCurrency}}</h1>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                price: 356
            },
            //过滤器的本质就是一个有参数有返回值的方法
            filters: {
                myCurrency: function (myInput) {
                    //根据业务的需要，对传来的数据进行处理
                    //并返回处理后的结果
                    console.log(arg1);
                    var result =“$” + myInput;
                    return result;
                }
            }
        })
    </script>
</body>

2.过滤器的使用

语法：{{表达式|过滤器}}

3.过滤器的高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行参数的过滤

<body>
    <div id="container">
        <h1>{{msg}}</h1>

        <h1>{{price}}</h1>
        <h1>{{price|myCurrency('￥')}}</h1>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                price: 356
            },
            //过滤器的本质就是一个有参数有返回值的方法
            filters: {
                myCurrency: function (myInput,arg1) {
                    //根据业务的需要，对传来的数据进行处理
                    //并返回处理后的结果
                    console.log(arg1);//￥
                    var result = arg1 + myInput;
                    return result;
                }
            }
        })
    </script>
</body>