《跟热饭一起学习vue吧》Part.9 过滤器

过滤器

vue的新知识点，过滤器，这个过滤器是要过滤谁？其实就是某个变量而已。但是这里我觉得叫过滤器并不准确，因为它能做的事情太多了，叫修改器还差不多。

比如我要显示一个变量message

<p>{{ message }}</p>

但是这里有个需求，就是要把这个变量内容的字符串首字母变成大写！

这要怎么做呢？其实就可以在里面加个函数专门办这件事即可。

那么怎么来让这个函数自动生效运行，并且每次都能作用到这个变量身上呢？简单来说，就是怎么用？

这时候就引出了我们的知识点，过滤器。

然后我们仍然面临三个问题：

1.函数写在哪？

答：我们要学习一个vue构造器的新组成部分：filters，也就是我们本节课的核心内容：过滤器。它和data和methods类似，内容都用大括号包裹。里面放的都是函数，用来对显示的各种文案进行过滤或修改。

比如我们声明一个过滤器函数叫 capitalize。它负责把要修改的字符串的首字母大写。那么就应该放在这里：

2.函数怎么写？

函数内部的逻辑并不是我们学习vue的主要内容，因为是js写的，所以这里给大家看一下即可，能不能理解暂时不那么重要。

首先看下这个过滤器函数的入参，也就是这个value，这个value就是要改造的字符串。下面就是正常的js判断，如果为空则返回空，否则就先变成字符串，然后用下标0代表首字母，用toUpperCase来变成大写，再拼接上从下标1开始的其余部分，最终把这个字符串返回。返回到哪？当然返回到p标签中了。

3.函数怎么调用？

在dom层使用，你想给那个变量用上这个过滤器函数 就用。然后这个变量就会进入到过滤器函数中变成那个入参value，然后返回新的字符串放在dom层展示。

具体写法：

![](https://gitee.com/woodywrx/picture/raw/master/2021-7-29/1627551891094-image.png)

如下图所示，即成功的过滤器使用demo：

关于过滤器，其实还有其他更复杂的用法，大家可以提前了解下。 过滤器串联：

{{ message | filterA | filterB }}

顾名思义，就是这个message变量的数据让filterA改造一遍，然后再让filterB改造一遍后 才显示到页面上。 过滤器带参数：

{{ message | filterA('arg1', arg2) }}

如上面这句demo，意思是说，过滤器函数不但可以接收字符串等类型的参数，如:"arg1"，还可以接收 表达式arg2 作为参数，比如写成：

{{ message | filterA('arg1', 1+1) }}

那么就会最后接收一个 2 作为参数，表达式会先被求值，然后把值当做参数。 而本来我们什么参数都不写的时候，它会自动把message变量的值当做第一个参数，那我们现在加上其他的参数后，这顺序是什么呢？答案是：message的值仍然作为第一个参数value，而我们自己加的所有参数，将被安排到第二个，第三个位置上..... 依次类推。

好了本节课就到这里，怎么样，是不是感觉很简单？？？