Vue过滤器

1、过滤器

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

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

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

1.1 定义过滤器

在创建vue示例期间，可以在filters 节点中定义过滤器。

const vm =new Vue({
   el:'app',
   data:{
     message:'hello vue.js',
     info:'title info'
   },
   filters:{
     capitalize(str){ //把首字母转为大写的过滤器
        return str.charAt(0).toUpperCase()+str.slice(1)
       }
   }
   
})

1.2 私有过滤器和全局过滤器

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

//全局过滤器 - 独立于每个vm实例之外，用Vue.filter()方法定义
//Vue.filter()有两个参数，第一个参数是过滤器的名字，第二个参数是过滤器的处理函数
Vue.filter('capitalize',(str)=>{
    return str.chatAt(0).toUpperCase()+str.slice(1)
   })

1.3 过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数：

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

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

• 调用maxLength 过滤器时传参

<p> {{ text | maxLength(5)}}</p>

//全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str,len=10)=>{
  if(str.length<=len) return str
  return str.slice(0,len)
})

1.4. 过滤器的兼容性

过滤器仅在 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-strateg