【Vue】过滤器Filters

简介: 【Vue】过滤器Filters

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} = {}) {
  // ...
}


  • 另外要注意,参数默认值不是传值,而是每次都重新计算默认值表达式的值
  • 参数默认值的位置要在解构赋值默认值的后面,否则会报语法错误


相关文章
|
10天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
30 0
|
11天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
12 3
|
3天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
11 1
|
3天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
3天前
|
JavaScript
vue知识点
vue知识点
15 2
|
3天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
14 2
|
4天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
4天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0
|
4天前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
20 2