Vue.js——局部过滤器&全局过滤器

最新推荐文章于 2025-07-11 11:54:59 发布

fewuliu

最新推荐文章于 2025-07-11 11:54:59 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue.js

本文链接：https://blog.youkuaiyun.com/qq_42049445/article/details/89292682

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vue.js中局部和全局过滤器的使用方法，包括如何定义过滤函数、保留小数位数操作以及日期格式化等。展示了在HTML代码中应用过滤器的具体语法。

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

局部过滤器

在Vue实例中的写法

filters:{
           convert(data, n){
               return data.toFixed(n);
           },
    }

即通过vue提供的filters选项，然后通过方法的方式写过滤函数，默认过滤函数第一个位置的形参代表要过滤的变量值
如果页面中需要传入其他数据，需要形参中则第二位置开始代表传入的第一个参数，依次类推
至于如果toFixed函数看不懂，toFixed是对数据进行保留小数位数的操作

页面中html代码的编写

<div id="app">
        <p>{{msg | convert(3)}}</p>
 </div>

通过在mustache语法中写管道符分割开变量与过滤函数
此处convert(3)中的3，在过滤器函数的形参在第二个位置

全局过滤器

通过Vue全局对象的filter属性进行编写

PS：此处以对Date函数返回的函数，进行过滤输出为例

Vue.filter('date',function(data){
        date = new Date(data);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        month = month<10 ? '0'+month:month;
        day = date.getDate();
        day = day<10 ? '0'+day:day;
        hours = date.getHours();
        hours = hours<10 ? '0'+hours:hours;
        minutes = date.getMinutes();
        minutes = minutes<10? '0'+minutes:minutes;

        return year+"-"+month+'-'+day+' '+hours+':'+minutes;
    })

filter属性第一个参数代表“过滤器名”，第二个参数代表要执行的函数function(){}对象

页面中html代码的编写

<div id="app">
      {{date | date}} 
 </div>

运行结果

在这里插入图片描述