vue2中的(filters)局部过滤器与全局过滤器、过滤器传参、调用多个过滤器

目录

1、局部过滤器

2.全局过滤器

3.连续调用多个过滤器

 4.过滤器传参

5.过滤器的兼容性

---

1、局部过滤器

        过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下:

<!--在双花括号中通过"管道符"调用capitalize 过滤器，对message 的值进行格式化-->
<p>{{ message | capitalize }}</p>

<!-- 在v-bind 中通过"管道符”调用 formatId过滤器，对rawId 的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>

这个过滤器只能在vue2使用

案例：

 注意：

1. 要定义到filters节点下，本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，就可以获取到“管道符"前面待处理的那个值

 以上是私有过滤器，接下来我们定义全局过滤器。

2.全局过滤器

用Vue.filter定义全局过滤器

在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

//全局过滤器 - 独立于每个 Vm 实例之外
// Vue.filter() 方法接收两个参数:
// 第1个参数，是全局过滤器的"名字”
// 第2个参数，是全局过滤器的“处理函数”
Vue.filter( 'capitalize', (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

 案例：

 显示效果如下：

如果全局过滤器和私有过滤器名字一致, 此时按照“就近原则”，调用的是”私有过滤器”；

使用全局过滤器格式化时间

dayjs.min.js插件能够快速实现时间格式化，直接百度dayjs可以搜索或下载文件和查看官方文档；

第一步：

 第二步：（使用过滤器）

 

第三步：（定义全局过滤器格式化时间）

 

3.连续调用多个过滤器

<!--把 message 的值，交给 filterA 进行处理-->
<!--把 filterA 处理的结果，再交给 filterB 进行处理
<!--最终把 filterB 处理的结果，作为最终的值渲染到页面上-->
! {{ message | filterA | filterB }}

 4.过滤器传参

 过滤器的本质是JavaScript函数,因此可以接收参数,格式如下:

<!-- arg1 和 arg2 是传递给 filterA 的参数-->
<p>{{ message | filterA(arg1, arg2) }}</p> 

// 过滤器处理函数的形参列表中:
// 第一个参数:永远都是”管道符”前面待处理的值
// 从第二个参数开始，才是调用过滤器时传递过来的 arg1 和 arg2 参数
Vue.filter('filterA', (msg, argt, arg2) => {
    // 过滤器的代码逻辑...
})

5.过滤器的兼容性

 过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中:

• 如果使用的是 2.x 版本的 vue ,则依然可以使用过滤器相关的功能
• 如果项目已经升级到了 3.x 版本的 vue ，官方建议使用计算属性或方法代替被剔除的过滤器功能

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

对宝子们有用就是我最大的前进动力，喜欢的点点赞吧！！！

每天更不停，和我一起学前端......