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 也不报错,但是过滤器是没有效果的。
  • 当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用
  • 一个表达式可以使用多个过滤器,其执行顺序从左往右,前一个过滤器的结果作为后一个过滤器的被处理数据,所以要注意使用顺序
相关推荐
Demoncode_y11 分钟前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
Never_Satisfied16 分钟前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied17 分钟前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
茶憶39 分钟前
uniapp 请求接口封装和使用
vue.js·uni-app
岁月宁静1 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
码农飞哥1 小时前
AI编程开发系统001-基于SpringBoot+Vue的旅游民宿租赁系统
vue.js·spring boot·毕业设计·ai编程·计算机源码
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
liaojuajun3 小时前
可视化地图
开发语言·javascript·ecmascript
小高0073 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js