今日学习内容:
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`,而只是改变渲染的结果,并返回过滤后的版本
|