描述

项目	描述
IDE	VScode
操作系统	Windows 10 专业版
Vue.js	2.6.12

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

上述内容引用自 Vue.js 官网

注：
过滤器仅在 Vue 2.x 及 Vue 1.x 版本中被支持，在 Vue 3.x 中已被弃用。所以在推演本文章中的案例前，请先检查您的 Vue.js 的版本。

capitalize 过滤器

在如下示例中，我将使用过滤器 capitalize 将目标文本中的每个单词的首字母大写化。

<!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>Vue 基础之过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 使用过滤器 capitalize 对 message 进行文本格式化操作 -->
        <p>{{ message | capitalize }}</p>
    </div>

    <!-- 导入 Vue.js -->
    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            filters: {
                // 定义过滤器函数
                capitalize(value) {
                    // 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象
                    arr = value.split(' ');
                    for(var i=0; i<arr.length; i++){
                        // 将单词的首字母由小写字母转换为大写字母
                        first = arr[i].charAt(0).toUpperCase()
                        // 获取除单词中除首字母外的其他部分
                        other = arr[i].slice(1)
                        arr[i] = first + other
                    };
                    // 使用空格将数组中已转换的单词进行拼接并将其作为返回值返回
                    return arr.join(' ')
                }
            }
        })
    </script>
</body>
</html>

执行结果：

Hello World

注：

在使用过滤器后，需要在 filters 中定义过滤器。
过滤器的本质是一个函数，该函数能将管道符前一个数据的结果值作为过滤器函数的参数。
使用过滤器后，文本内容的结果值将为过滤器的返回值。比如：

<!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>Vue 基础之过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 使用过滤器 capitalize 对 message 进行文本格式化操作 -->
        <p>{{ message | capitalize }}</p>
    </div>

    <!-- 导入 Vue.js -->
    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            filters: {
                // 定义过滤器函数
                capitalize(value) {
                    // 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象
                    arr = value.split(' ');
                    for(var i=0; i<arr.length; i++){
                        // 将单词的首字母由小写字母转换为大写字母
                        first = arr[i].charAt(0).toUpperCase()
                        // 获取除单词中除首字母外的其他部分
                        other = arr[i].slice(1)
                        arr[i] = first + other
                    };
                    // 使用空格将数组中已转换的单词进行拼接并将其作为返回值返回
                    return 'abc'
                }
            }
        })
    </script>
</body>
</html>

执行结果：

abc

无论你使用过滤器函数对文本进行了怎样的操作，使用过滤器对文本进行格式化的结果都将为过滤器函数的返回值，所以在对文本进行一顿操作后，请记得将结果作为过滤器函数的返回值进行返回。

过滤器函数的参数

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。

上述内容引用自 Vue.js 官网

私有过滤器与全局过滤器

私有过滤器

在刚刚的示例（captilize 过滤器）中，我们创建了一个私有过滤器。私有过滤器仅能被创建该过滤器的 ViewModel (Vue 构造函数的实例化对象）所控制的区域（el 所选定的元素及其子孙元素）所使用。

<!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>Vue 基础之过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 使用过滤器 capitalize 对 message 进行文本格式化操作 -->
        <p>【app】  {{ message | capitalize }}</p>
    </div>

    <div id="app1">
        <p>【app1】 {{ message | capitalize }}</p>
    </div>

    <!-- 导入 Vue.js -->
    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            filters: {
                // 定义过滤器函数
                capitalize(value) {
                    // 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象
                    arr = value.split(' ');
                    for(var i=0; i<arr.length; i++){
                        // 将单词的首字母由小写字母转换为大写字母
                        first = arr[i].charAt(0).toUpperCase()
                        // 获取除单词中除首字母外的其他部分
                        other = arr[i].slice(1)
                        arr[i] = first + other
                    };
                    // 使用空格将数组中已转换的单词进行拼接并将其作为返回值返回
                    return arr.join(' ')
                }
            }
        })

        const vm1 = new Vue({
            el: '#app1',
            data: {
                message: 'hello world'
            }
        })
    </script>
</body>
</html>

执行结果：

可以看到在 vm 对象中创建的 capitalize 并没有影响到 vm1 控制区域中同名的过滤器函数。

全局过滤器

私有过滤器不能被 ViewModel 对象所共享，仅能被创建它的 ViewModel 对象的控制区域所使用。能不能通过某种手段让创建的过滤器函数被每一个 ViewModel 对象所共享呢?
我们可以创建一个全局过滤器来达成上述目标。

Vue.filter()

使用 Vue.filter() 函数即可创建一个全局过滤器。Vue.filter() 接收两个参数，其中第一个参数为全局过滤器函数的名称，第二个参数则为全局过滤器的处理函数。

capitalize 全局过滤器

<!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>Vue 基础之过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 使用过滤器 capitalize 对 message 进行文本格式化操作 -->
        <p>【app】  {{ message | capitalize }}</p>
    </div>

    <div id="app1">
        <p>【app1】 {{ message | capitalize }}</p>
    </div>

    <!-- 导入 Vue.js -->
    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        Vue.filter('capitalize', (value) => {
            // 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象
            arr = value.split(' ');
            for(var i=0; i<arr.length; i++){
                // 将单词的首字母由小写字母转换为大写字母
                first = arr[i].charAt(0).toUpperCase()
                // 获取除单词中除首字母外的其他部分
                other = arr[i].slice(1)
                arr[i] = first + other
            };
            // 使用空格将数组中已转换的单词进行拼接并将其作为返回值返回
            return arr.join(' ')
        })


        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })

        const vm1 = new Vue({
            el: '#app1',
            data: {
                message: 'hello world'
            }
        })
    </script>
</body>
</html>

执行结果：

全局过滤器 VS 私有过滤器

可以看到示例 capitalize 全局过滤器 成功的创建了可以被多个 ViewModel 共享的全局过滤器。但从这个示例中由引出了一个问题，若同时存在同名的全局过滤器及私有过滤器，含有私有过滤器会优先使用哪一个过滤器呢？

<!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>Vue 基础之过滤器</title>
</head>
<body>
    <div id="app">
        <p>{{ message | capitalize }}</p>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>
    <script>
        Vue.filter('capitalize', (value) => {
            return '【全局优先】'
        });

        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            filters: {
                capitalize(value) {
                    return '【私有优先】'
                }
            }
        });
    </script>
</body>
</html>