菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 过滤器的使用-2023.06.20 [打印本页]

作者: 霁后彩虹O 时间: 2023-6-21 00:35
标题: 过滤器的使用-2023.06.20
今日学习内容：

1.什么是过滤器（filter）

作用：过滤器和函数是用来**处理数据**的

分类：全局过滤器和局部过滤器

出现位置：**双花括号插值{{}}和 v-bind 表达式**

2. 全局过滤器定义

调用构造函数的filter方法

==Vue.filter("过滤器名称", 过滤器处理函数):==（没有s）
3. 过滤器使用：

{{msg| 过滤器名称}}

:value="msg | 过滤器名称"
只能在插值语法和v-bind中使用

过滤器可以连续使用

过滤器不改变真正的`data`，而只是改变渲染的结果，并返回过滤后的版本。

4.局部过滤器

全局过滤器：在任何一个Vue实例控制的区域中都可以使用

局部过滤器：只能在自定义的那个Vue实例中使用

### 如何自定义局部过滤器

给创建Vue实例时传递的对象添加==**配置**==

### 如何使用局部过滤器

{{msg | 过滤器名称}}

:value="msg | 过滤器名称"
## 注意点

==过滤器本质是js函数==

### 要有返回值

### 过滤器可以**连续使用**

```html
<p>{{msg | formartStr1 | formartStr2}}</p>
```

### 过滤器可以传参

过滤器本质是js函数，因此可以接受参数

第一个参数：管道符前待处理的值

第二个参数后：从第二个参数开始，才是调用过滤器时传递过来的arg1 arg2
### 过滤器优先级

如果全局过滤器和局部过滤器同名，按照就近原则，调用局部过滤器

### 过滤器兼容性

vue3.x 中已经删除了过滤器的相关功能，

如果企业项目已经升级到vue3.X，建议用**计算**和**方法**替代过滤器。

如果是vue2.x项目仍可用过滤器相关功能。

总结：

- Vue.js允许自定义过滤器，可被用于一些常见的**文本格式化**。
- 过滤器可以用在两个地方：**双花括号插值和v-bind表达式**。
- 过滤器应该被添加在JavaScript表达式的尾部，由“**管道”符号指示 |**
- 支持级联操作
- 过滤器不改变真正的`data`，而只是改变渲染的结果，并返回过滤后的版本

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)