Vue 基础之过滤器

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

Vue 基础之过滤器

描述

项目描述
IDEVScode
操作系统Windows 10 专业版
Vue.js2.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

注

  1. 在使用过滤器后需要在 filters 中定义过滤器。
  2. 过滤器的本质是一个函数该函数能将管道符前一个数据的结果值作为过滤器函数的参数。
  3. 使用过滤器后文本内容的结果值将为过滤器的返回值。比如
<!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>

执行结果

【私有优先】

可以看到在全局过滤器与私有过滤器发生冲突时将按照 就近原则 调用私有过滤器。

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue
返回列表

上一篇：连接sentinel控制台并实现限流

下一篇：excel图表技巧：如何在折线图上标注极值

“Vue 基础之过滤器” 的相关文章

千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)1年前 (2023-02-02)
从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）1年前 (2023-02-02)
vue 入门和生命周期1年前 (2023-02-02)
【vue2】计算属性(computed)与侦听器(watch)详解1年前 (2023-02-02)
vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况1年前 (2023-02-02)
vue3开源项目1年前 (2023-02-02)
【手写 Vue2.x 源码】第二十八篇 - diff算法-问题分析与patch优化1年前 (2023-02-02)
基于Vue框架的web项目实现同一个浏览器仅能同时登录一个账号的方法1年前 (2023-02-02)
【学Vue就跟玩一样】组件的自定义事件和全局事件总线1年前 (2023-02-02)
Springboot +Shiro +VUE 前后端分离式权限管理系统1年前 (2023-02-02)

阿里云国际版