vue自定义过滤器的创建与使用

过滤器：生活中有很多例子，净水器空气净化器。
过滤器的作用：实现数据的筛选、过滤、格式化。

vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。

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

new Vue({

　　　　filters:{

　　　　　　myCurrency:function(myInput){

　　　　　　　　return 处理后的数据

　　　　　　}

　　　　}

　　})

2、过滤器使用
语法：

<any>{{表达式 | 过滤器}}</any>

举个例子：

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

3、过滤器高级用法

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

①如何给过滤器传参？

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

②如何在过滤器中接收到？

new Vue({

　　filters:{

　　　　//myInput是通过管道传来的数据

　　　　//arg1在调用过滤器时在圆括号中第一个参数

　　　　//arg2在调用过滤器时在圆括号中第二个参数

　　　　myCurrency:function(myInput,arg1,arg2){

　　　　　　return 处理后的数据

　　　　}

　　}

})

　　示例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <title></title>

</head>

<body>

<div id="container">

    <p>{{msg}}</p>

    <h1>{{price}}</h1>

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

</div>

<script>

    // filter

    new Vue({

        el: '#container',

        data: {

            msg: 'Hello Vue',

            price:356

        },

        //过滤器的本质 就是一个有参数有返回值的方法

        filters:{

            myCurrency:function(myInput,arg1){

                console.log(arg1);

                //根据业务需要，对传来的数据进行处理

                // 并返回处理后的结果

                var result = arg1+myInput;

                return result;

            }

        }

    })

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <title></title>

</head>

<body>

<div id="container">

    <p>{{msg}}</p>

    <h1>{{name | myTextTransform(false)}}</h1>

</div>

<script>

    new Vue({

        el: '#container',

        data: {

            msg: 'Hello Vue',

            name:'Michael'

        },

        filters:{

            myTextTransform: function (myInput,isUpper) {

                if(isUpper)

                {

                    return myInput.toUpperCase();

                }

                else{

                    return myInput.toLowerCase();

                }

            }

        }

    })

</script>

</body>

</html>

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>过滤器</title>

    <script src="js/vue.js"></script>

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <h1>{{price}}</h1>

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

    </div>

    <script>

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs",

                price:356

            },

//过滤器的本质 就是一个有参数有返回值的方法

            filters:{

                myCurrency:function(myInput){

                    var result = "$"+myInput;

                    return result;

                }

            }

        })

    </script>

 </body>

</html>

最后一个例子是写死的

巴特西

vue自定义过滤器的创建与使用

示例

返回目录

最新文章

热门文章