当前位置：首页 > article >正文

Vue 过滤器 filter(s) 的使用

article 2025/3/10 15:41:53

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

过滤器分为两种

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

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

定义过滤器

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

过滤器的功能函数

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

第一个参数是传入的要过滤的数据，即调用时管道符左边的内容。
第二个参数开始往后就是调用过滤器的时候传入的参数。

先注册，后使用

组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据
全局 Vue.filter(‘过滤器名’,fn) fn 内通过 return 返回最终的数据
使用 {{ 数据 | 过滤器名 }}

全局

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

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

局部

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

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