Vue 过滤器 filter(s) 的使用

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

过滤器分为两种

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

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

定义过滤器

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

第二个参数是过滤器的功能函数 (若不定义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 也不报错,但是过滤器是没有效果的。
  • 当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用
  • 一个表达式可以使用多个过滤器,其执行顺序从左往右,前一个过滤器的结果作为后一个过滤器的被处理数据,所以要注意使用顺序
相关推荐
W.Buffer1 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
皓月Code2 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
MoonBit月兔2 小时前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
非凡ghost2 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
www_stdio2 小时前
深入理解JavaScript变量声明:var、let与const的全面解析
javascript
San302 小时前
AI 歌词生成器:使用 OpenAI 打造你的专属作词助手
javascript·人工智能·node.js
用户84298142418103 小时前
JavaScript数据类型
javascript