Vue 过滤器 filter(s) 的使用

一只月月鸟呀2025-03-11 4:02

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据，它的作用是过滤数据，就是对数据进行加工处理并返回处理后的数据，比如做一些数据格式上的修改，状态转换等。

过滤器分为两种

组件内的过滤器(组件内有效)

全局过滤器(所有组件共享)

定义过滤器

第一个参数是过滤器的名字

第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么，有什么作用)。

过滤器的功能函数

声明 function(data,argv1,argv2...){}

第一个参数是传入的要过滤的数据，即调用时管道符 左边的内容。

第二个参数开始往后就是调用过滤器的时候传入的参数。

先注册，后使用

组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

使用 {{ 数据 | 过滤器名 }}

全局

js 复制代码

Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据
    // 过滤器业务逻辑，要有返回值
})

<div>{{ msg | 过滤器名称 }}</div>
<div v-bind="msg | 过滤器名称"></div>

局部

js 复制代码

data () {
    return {
        msg: 'hello world'
    }
},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
    dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
        return msg + a;
    }
}

<p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!

注意事项

全局注册时是 filter 没有 s ，而组件过滤器是 filters，是有 s 的，虽然写的时候没有 s 也不报错，但是过滤器是没有效果的。
当全局过滤器和局部过滤器名字重复的时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用
一个表达式可以使用多个过滤器，其执行顺序从左往右，前一个过滤器的结果作为后一个过滤器的被处理数据，所以要注意使用顺序