13vue学习——过滤器的使用

最新推荐文章于 2024-03-06 09:07:19 发布

原创最新推荐文章于 2024-03-06 09:07:19 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解Vue中的过滤器使用，包括全局过滤器和私有过滤器的定义、调用及参数传递方式。通过实例演示如何在插值表达式和v-bind表达式中应用过滤器进行文本格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

13vue学习——过滤器的使用

前言

过滤器是用于一些常见文本的格式化的工具。他只能用在两个地方—— 插值表达式和 v-bind 表达式。

总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器的使用</title>
</head>
<body>
    <div class="body">
        <p>{{msg | msgFormat1("字母")| msgFormat2}}</p>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
    	/*全局过滤器*/
        Vue.filter('msgFormat1',function(msg,arg){
            return msg.replace(/数字/g,arg);
        });

        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是数字1，我是数字2，我是数字3，这里有三个数字",
            },
            /*私有过滤器*/
            filters:{
                msgFormat2:function(msg){
                    return msg + "=========";
                }
            }
        })
    </script>
</body>
</html>

全局过滤器是 filter：所有的vm实例都能共享

私有过滤器是 filters：定义了该过滤器的vm实例才可以使用

过滤器的使用遵循就近原则，则当全局过滤器和私有过滤器重名时，调用的是使用私有的过滤器

1. 全局过滤器

定义：

（1）全局过滤器是定义在 vue 实例外部的
（2）fliter 的第一个参数为该过滤器的名称，第二个参数为实现过滤的方法
（3）在实现过滤的方法中，第一个参数是其管道符前面的数据，第二个参数以及第二个参数以后的参数是传过来的参数
（4）全局过滤器定义在JavaScript 代码的头部
（5）过滤器的名称需要用引号包裹起来
（6）调用的时候使用 “ | ”，在其后面加上过滤器名称，如果需要加传参则需在名称后面加上小括号传递所需的参数

2. 私有过滤器

定义：

（1）私有过滤器是定义在 vue 实例内部的，专门定义在 filters 对象中
（2）定义格式为 —— 方法名 : function( 传过来的参数 ){ 内部代码 }
（3）方法名无需用引号包裹起来
（4）调用同全局过滤器的调用方法相同