Vue.js过滤器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/98885897

语法

Vue.filter（'过滤器名称'，function（）{}）
-----------------------------------------------------------=
<!--过滤器调用时候的格式 {{name | 过滤器的名称}} -->

全局过滤器

Vue.filter('msgFormat',function (msg,arg,arg2) {
        //字符串的replace 方法，第一个参数，除了可写一个字符串以外，还可以定义一个正则表达
      return msg.replace(/单纯/g,arg+arg2)
    })

私有过滤器

 new Vue({
        el:'#app2',
        data: {

            msg:'定义一个私用的过滤器'
        },
        methods:{

        },
        filters: {
            //当两个过滤器名字相同的时候，调用顺序，先调用私有的
            msgFormat:function (msg, ptter) {
                return msg+'私有过滤器'
            }}

    });

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--过滤器对数据进行出来,多个过滤器，从左到右-->
    <p>{{msg| msgFormat('疯狂','+1') | msgFormat2()}}</p>
</div>
<div id="app2">
    <!--过滤器对数据进行出来,多个过滤器，从左到右-->
    <p>{{msg| msgFormat()}}</p>
</div>
<script type="text/javascript">
    //过滤器的定义语法
    //Vue.filter（'过滤器名称'，function（）{}）
    //过滤器中的function,第一个参数已经被规定死了，永远都是过滤器管道符前面传过来的数据
    <!--过滤器调用时候的格式 {{name | 过滤器的名称}} -->
    //定义一个全局的过滤器1
    Vue.filter('msgFormat',function (msg,arg,arg2) {
        //字符串的replace 方法，第一个参数，除了可写一个字符串以外，还可以定义一个正则表达
      return msg.replace(/单纯/g,arg+arg2)
    })
    //定义一个全局的过滤器2
    Vue.filter('msgFormat2',function (msg) {
        //字符串的replace 方法，第一个参数，除了可写一个字符串以外，还可以定义一个正则表达
        return msg+'==========='
    })
    new Vue({
        el:'#app',
        data: {

            msg:'我是一个单纯的男人，单纯得像个小孩'
        },
        methods:{

        }
    });
    new Vue({
        el:'#app2',
        data: {

            msg:'定义一个私用的过滤器'
        },
        methods:{

        },
        filters: {
            //当两个过滤器名字相同的时候，调用顺序，先调用私有的
            msgFormat:function (msg, ptter) {
                return msg+'私有过滤器'
            }}

    });
</script>
</body>
</html>