Vue过滤器的基本用法【vue学习day4】

过滤器（Vue3中已砍）

一、定义过滤器

image.png

capitalize是自定义的首字母大写的函数，message作为参数传给这个函数，花括号得到的是函数的返回值

过滤器函数必须被定义到filters节点下（与methods平级）

过滤器一定要有return返回值

过滤器的形参中，val代表管道符前面的那个值（不一定要叫val，形参名合法就行，只是可以通过形参获取管道符前面那个待处理的值）

示例代码：

  
message 的值是：{{ message | capitalize }}

二、私有过滤器和全局过滤器

image.png

实际开发中更多的是定义全局过滤器

如果全局过滤器和私有过滤器名字一致，会根据就近原则调用私有过滤器

2.1. 定义一个日期格式化的全局过滤器

dayjs插件----时间格式优化：

（官网说明文档：解析 | Day.js中文网）

{{ item.time | dateFormat }}
...


...

2.2. 连续调用多个过滤器

image.png

2.3. 过滤器传参

image.png

2.4. 过滤器的兼容性

image.png

具体的迁移指南，请参考 vue 3. 的官方文档给出的明:https://v3.vuejs.org/guide/migration/filters.html#migration-strategy