学习笔记（6）filter

原创已于 2023-01-29 09:49:17 修改 · 118 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #filter

于 2022-06-27 14:16:13 首次发布

Vue2-学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue.js中的过滤器功能，包括全局过滤器的注册与使用，以及局部过滤器在组件内的应用。重点讲解了过滤器的两种类型及其在模板中的不同用法，如`{{money|wholeFil|forMat}

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

1，filter（过滤器）简介

一些业务场景，需要组件中的数据，格式化之后再渲染到页面上，使用computed可以达到相同的效果，但是有更合适的方法—过滤器。
vue中，过滤器分为两种：全局过滤器和局部过滤器。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

<!-- 在双花括号中 -->
{{ money |wholeFil}}

<!-- 在v-bind 表达式中 -->
<button :id='message|forMat'>按钮</button>

2，全局过滤器

//Vue.filter：用于全局注册一个过滤器，必须写在new Vue()之前。
//1参是过滤器的名字，2参是过滤函数。
Vue.filter("wholeFil",function(v){
    if(v != 0){
        return v + '全局过滤器'
    }
})

new Vue({ .... })

3，局部过滤器

在组件的配置对象的filters字段中添加过滤器，
键是过滤器名字，值是过滤函数。

filters:{
   forMat(v){
     if(v != 0){
        return v + '元钱'
     }          
   }
}

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
组件内局部注册的过滤器，只能在组件的模板中使用。
多个过滤器可以连续使用，过滤器类似函数调用，可以传参。

{{ money | wholeFil | forMat}}
<!--  一个参数时，money是参数-->
<p>{{ money | wholeFil }}</p>
<!--多个参数时  -->
{{ message |forMat(2参,3参)}}