vue中的过滤器filter

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情

前言

vue.js为我们提供了强大的过滤器API，可以对数据进行各种过滤处理，返回我们想要的结果，过滤器又分别全局过滤器和局部过滤器，过滤器本质上是函数，所以过滤器中一定有返回值

过滤器的用法

过滤器的普通用法就是管道符号（ | ）作为分隔，管道符左边是要过滤的变量，右边是过滤器名称

<template>
  <div>
    <p>{{ time | dataFormat}}</p>
  </div>
</template>

还有串联用法，先用过滤器dataFormat1过滤一遍time，再用过滤器dataFormat2进行第二次过滤的结果，为最终结果

<template>
  <div>
    <p>{{ time | dataFormat1 | dataFormat2}}</p>
  </div>
</template>

局部过滤器

当我们需要将时间戳使用过滤器过滤，转为时间该怎么使用局部过滤器呢？

data() {
    return {
        time:1671594597
    };
},

首先在组件里定义局部过滤器filters，在里面定义一个函数，函数的名字就是过滤器的名字，函数的参数就是要过滤的原数据和参数，函数里写过滤的功能最后return过滤的结果

filters:{ //定义局部过滤器
    dataFormat(time){ //过滤器名字和要过滤的参数
        //过滤操作
        return  //返回过滤结果
    }
},

然后就可以试着使用过滤器将时间戳转为对应的时间了，也是成功的将时间戳过滤为时间了

filters:{
    dataFormat(time){
        const dt=new Date(time*1000)
        const y=dt.getFullYear()
        const m=(dt.getMonth()+1 + '').padStart(2,'0')
        const d=(dt.getDay()+'').padStart(2,'0')
        const hh=(dt.getHours()+'').padStart(2,'0')
        const mm=(dt.getMinutes()+'').padStart(2,'0')
        const ss=(dt.getSeconds()+'').padStart(2,'0')
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
},

全局过滤器

全局定义过滤器在main.js使用Vue.filter()定义,接收两个参数，一个是全库过滤器的名字，另一个是要过滤的参数

Vue.filter('dataFormat',function(time){
  const dt=new Date(time*1000)
  const y=dt.getFullYear()
  const m=(dt.getMonth()+1 + '').padStart(2,'0')
  const d=(dt.getDay()+'').padStart(2,'0')
  const hh=(dt.getHours()+'').padStart(2,'0')
  const mm=(dt.getMinutes()+'').padStart(2,'0')
  const ss=(dt.getSeconds()+'').padStart(2,'0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

也是看到使用全局过滤器也是成功的将时间戳过滤为时间了