Vue过滤器filter

过滤器的定义语法：

Vue.filter('过滤器的名称',function () {})

过滤器两个条件：过滤器名称，处理函数。

过滤器中的function ，第一个参数已经被规定死了，永远是过滤器管道符前面传递过来的数据

全局过滤器简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 过滤器调用格式  ： {{ name | 过滤器的名称 }} -->
        <p>{{msg | myfilter}}</p>
    </div>

    <script>

        // 过滤器的定义语法：
        // Vue.filter('过滤器的名称',function () {})
        // 过滤器中的function ，第一个参数已经被规定死了，永远是 过滤器 管道符 前面传递过来的数据
        // Vue.filter('过滤器的名称', function (data) {
        //     return data + '123';
        // })

        // 定义一个Vue全局过滤器 名称：myfilter
        Vue.filter('myfilter',function (msg) {
            // 字符串的replace 方法，第一个参数，除了可以是字符串之外，也可以是一个正则
            return msg.replace(/单纯/g, '现实');
        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
            },
            methods: {}
        });
    </script>
</body>
</html>

function传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 过滤器调用格式  ： {{ name | 过滤器的名称 }} -->
        <!-- 传一个参数 -->
        <!-- <p>{{msg | myfilter('简单')}}</p> -->
        <!-- 传多个参数 -->
        <p>{{msg | myfilter('简单','且疯狂')}}</p>
    </div>

    <script>

        // 定义一个Vue全局过滤器 名称：myfilter
        Vue.filter('myfilter',function (msg,arg,arg2) {
            return msg.replace(/单纯/g, arg+arg2);
        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
            },
            methods: {}
        });
    </script>
</body>
</html>

可以多个过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 过滤器调用格式  ： {{ name | 过滤器的名称 }} -->
        <p>{{msg | myfilter('简单','且疯狂') | test}}</p>
    </div>

    <script>

        Vue.filter('myfilter',function (msg,arg,arg2) {
            return msg.replace(/单纯/g, arg+arg2);
        });
        Vue.filter('test',function (msg) {
            return msg + '========';
        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
            },
            methods: {}
        });
    </script>
</body>
</html>

私有过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>私有过滤器</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg | myfilter('快乐的生活着')}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都曾经很单纯，单纯的以为一切都是美好的。'
            },
            methods: {},
            // 私有过滤器
            filters: {
                myfilter: function (msg,arg) {
                    return msg + arg;
                }
            }
        });
    </script>
</body>
</html>

过滤器调用的时候，采用就近原则。如果私有过滤器与全局过滤器名称一样了，优先调用私有过滤器

字符串的padStart方法使用,例如时间前面补零。

猜你喜欢