首页 前端知识 【Vue】过滤器Filters

【Vue】过滤器Filters

2024-08-30 20:08:57 前端知识 前端哥 383 222 我要收藏

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  
}

image-20230825011911536

结果:66

image-20230825011848071

为什么使用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} = {}) {
  // ...
}
  • 另外要注意,参数默认值不是传值,而是每次都重新计算默认值表达式的值

  • 参数默认值的位置要在解构赋值默认值的后面,否则会报语法错误

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17255.html
标签
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!