hello，我是小索奇，精心制作的Vue系列持续发放，涵盖大量的经验和示例，如对您有用，可以点赞收藏哈
过滤器
filters过滤器已从Vue 3.0中删除，不再支持了，这里可以作为了解进行学习
vue3要精简代码，过滤器能够实现的用methods和computed也能
什么是过滤器?
过滤器可以对绑定的数据进行格式化后再展示,它本质上是一个可以接收数据、进行处理并返回结果的函数我们可以在插值表达式或 v-bind 绑定中使用过滤器对显示的数据进行格式化
使用过滤器需要注意的几点:
- 过滤器函数要以
value或其他参数来接收数据 - 在模板中使用
{{ data | filter }}格式调用或者使用v-bind绑定data | filter过滤器 - 过滤器可以链式调用
{{ data | filterA | filterB }} - 过滤器要在
filters属性中定义,不要与methods混淆
- 过滤器适用于简单的逻辑，它能做的用
methods、computed也能够做到
下面的例子会把message作为参数传给filterName，得到返回值后替换整个插值表达式
- filterName不写括号也会把message作为参数传进去！
{{ message | filterName }} // 绑定一个var变量，同时通过formatId过滤器进行格式化 <div :id="rawId | formatId"></div>
// 比如rawId是下面的这个时间戳 rawId = 1564984456888 formatId(value) { return 'id-' + value } // div的id属性将被设置为 'id-1564984456888'
uppercase 把文本转换为全uppercase
{{ 'hello' | uppercase }} // 输出 'HELLO'
number 格式化数字
{{ 123456 | number }} // 输出 123,456
自定义过滤器举例:
// 在组件中定义 filters: { formatDate(value) { // 格式化日期 return value.toLocaleString() } } // 使用 <p>今天是 {{date | formatDate}}，今天也要开心呀</p>
过滤器可以串联使用:
message传给filterA，结果返回再传给filterB
{{ message | filterA | filterB }}
过滤器函数也可以接收额外参数:
{{ value | filter(arg1, arg2) }}
拓展
filters:{ fmtTime(){ return this.time+1 } }
A：这样写有问题吗？
Q：当然有问题了！
我们可能会说，啥都没给怎么判断有没有问题？
实际上当我们看到this的时候就证明错了！
过滤器函数中是没有this指向的,应该通过第一个参数来访问要过滤的数据
fmtTime(value){ return value + 1 }
结果：66
为什么使用var1呢？我们不能用类似 var、function、for等JS 原生关键字作为变量名,以免产生歧义或报错问题
不信我们试试，我就是忘了，报错后才改回来的~
结合ES6语法使用
// 在组件的filters中定义过滤器 filters: { formatDate(value, format='YYYY-MM-DD') { // format有默认值 // 根据format格式化日期 } } <p> {{ date | formatDate }} // 输出 '2023-08-25' (默认格式) {{ date | formatDate('YYYY/MM/DD') }} // 输出 '2023/08/25' (传入覆盖默认值) </p>
这里我们在格式化日期的过滤器函数中,利用ES6的默认参数为format设置了一个默认值’YYYY-MM-DD’
在使用过滤器时,如果不传递参数,会使用这个默认的格式;如果传递了参数,则参数值会覆盖默认值
ES6语法拓展
这里拓展下ES6语法，在ES6中,我们可直接在函数参数后面指定默认值,简化函数的调用比如:
function hello(x = 'hello', y = 'world') { console.log(x, y); } hello(); // 输出 'hello world' hello('hi'); // 输出 'hi world' hello(undefined, 'everyone'); // 输出 'hello everyone' hello('hey', '小索奇'); // 输出 'hey 小索奇' // 传递超过两个参数，额外的参数会被忽略 hello('hi', 'everyone', 'extra', 'parameters'); // 输出 'hi everyone'
只有没有传值的参数才会使用默认值，如果调用hello时没有传入参数,或者传入了undefined,x会自动获取默认值’default value’
这样就省去了对参数是否为undefined的检查~
参数默认值可以简化 undefined 的判断:
// 之前的写法 function hello(x) { x = x || 'hello'; } // ES6默认值写法 function hello(x = 'hello') { }
还可以结合解构使用默认值:
function hello({x = 1, y = 2} = {}) { // ... }
- 另外要注意,参数默认值不是传值,而是每次都重新计算默认值表达式的值
- 参数默认值的位置要在解构赋值默认值的后面,否则会报语法错误
