vue2.0——过滤器filters

过滤器是为vue开发者提供的功能，常用于文本的格式化，过滤器本质上是一个函数，可以用在两个地方：插值表达式和v-bind属性绑定。过滤器仅在vue2.x和vue1.x中受支持，在vue3.x的版本中剔除了过滤器相关功能。

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

• 在插值表达式中使用过滤器

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

• 在v-bind中使用过滤器

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

 ⚠️在过滤器中一定要有一个返回值，在网页中呈现的实际内容时过滤器的返回值而不是message。 并且这个message作为形参传入到过滤器中。

在调用过滤器之前要声明过滤器，过滤器分为私有过滤器和全局过滤器

声明私有过滤器：

在vue实例中，与data同级写入一个filters节点，私有过滤器函数就被定义在这个节点之下。因为它只能在当前vue 实例所控制的el区域内使用。

 示例代码（将待处理的值的第一个字母变为大写）：

filters:{
//过滤器函数形参中的val，永远都是管道符｜前面的值
capitalize(val) {
//过滤器一定要有一个返回值
// 字符串有charAt（）方法，这个方法接收索引值，表示从字符串中把索引对应的字符取出来。
//toUpperCase方法可以把字幕转化成大写
 const first = val.charAt(0).toUpperCase()
//字符串的slice（）方法，可以截取字符串，从指定索引往后截取
 const other =  val.slice(1)
return first+other
}
}

 声明全局过滤器： 

如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：一般情况下，在开发中都是使用全局过滤器。 使用Vue.filter()来定义全局过滤器。

  

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

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

过滤器的其他用法（不常用）

• 可以连续调用多个过滤器

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

• 在调用过滤器时可以传参

{{message|filterA(arg1,arg2)}}
<!--过滤器处理函数形参的列表中-->
<!--第一个参数永远都是管道符前面待处理的值-->
<!--从第二个参数开始才是调用过滤器时传过来的arg1 arg2参数 -->
Vue.filter('filterA',(message,arg1,arg2)=>{})