过滤器是为vue开发者提供的功能，常用于文本的格式化，过滤器本质上是一个函数，可以用在两个地方：插值表达式和v-bind属性绑定。

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

<!--在花括号中通过管道符｜调用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)})

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