作用：格式化数据，比如将字符串格式化为首字母大写、将日期格式化为指定的格式等。
- 过滤器可以定义成全局过滤器和局部过滤器。
- 过滤器的本质就是一个方法，使用过滤器实际上就相当于方法调用，仅是书写形式上的差异（使用的时候需要用“|”，其也可以被称之为管道或变量/数据修饰符）
a. 过滤器的作用：处理数据，加工数据
b. vue3.x中已经删除，但是不排除现在企业中还有老的项目依然使用2
c. 过滤器分为全局与局部（是否带s）
d. 过滤器处理程序必须有返回值（必须有return）
e. 过滤器的处理必须至少有1个形参，形参就是需要处理的数据
f. 过滤器在使用的时候需要使用特殊符号“|”
在视图中的语法：
1) {{time|filtername}}
“|”左右空格与否无所谓
time会默认被作为参数传递给过滤器filtername
2) {{time|filtername(arg1,arg2....)}}
过滤器后可以接着传递参数，后面的第一个参数就是过滤器处理程序的第2个形参....以此类推
g. 由于在vue3中已经删除过滤器，但是去思想依然在，官方推荐使用计算属性/函数调用的方式来处理数据
h. 过滤器支持连续调用，例如： {{string | A过滤器 | B过滤器 | C过滤器...}}
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 6 <title>标题</title> 7 </head> 8 <body> 9 <div class='app'> 10 <p> 原始数据{{date}}</p> 11 <p> 局部过滤波器转换数据1{{date|parse}}</p> 12 <p> 全局过滤器转换数据2{{date|all}}</p> 13 <p> 计算属性转换数据2{{cal}}</p> 14 </div> 15 </body> 16 <script src='./js/vue.js'></script> 17 <script> 18 // 全局过滤器 19 // 声明过滤器，过滤器的名称，函数，函数至少具有一个形参 20 Vue.filter('all',function(date){ 21 return date.toUpperCase(); 22 }) 23 new Vue({ 24 el: '.app', 25 data: { 26 date: 'iokjiujnhyogMIKJGBYHU7IOBGUYfjmwerklsafgjv', 27 }, 28 // 定义过滤器，局部的 29 filters:{ 30 // 过滤器的名称，函数。函数至少具有一个形参，第一个形参代表元素 31 parse:function(date){ 32 // 需要将结果后返回出去才可以 33 return date.toLowerCase(); 34 } 35 }, 36 // 使用计算属性 37 computed:{ 38 // 计算属性的名称 39 cal:function(){ 40 // 最后将结果进行返回 41 return this.date.toLowerCase() 42 } 43 } 44 }) 45 </script> 46 </html>