vue2.x之过滤器

过滤器顾名思义，是用来过滤数据的。其实在前端页面中并不常用的，能够帮我们简化代码，使模板变得更加清楚。虽然vue3中也已经取消了这个功能，但是了解并没有坏处。

自定义过滤器

过滤器是用来过滤数据的，一般用在模板中，主要是两个地方：插值语法中和v-bind表达式中。 自定义过滤器根据局部和全局可以分为局部过滤器和全局过滤器

1. 全局过滤器

全局过滤器定义好后，整个Vue实例都可以使用，也就是说全局过滤器可以在所有的组件中使用。

Vue.filter('formateTime', function (value) {
  let date = new Date(value)
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  month = month < 10 ? `0${month}` : month
  let day = date.getDate()
  day = day < 10 ? `0${day}` : day
  let hours = date.getHours()
  hours = hours < 10 ? `0${hours}` : hours
  let minutes = date.getMinutes()
  minutes = minutes < 10 ? `0${minutes}` : minutes
  let seconds = date.getSeconds()
  seconds = seconds < 10 ? `0${seconds}` : seconds
  const formatStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  return formatStr
})

2. 局部过滤器

局部过滤器就是在对应的组件中定义的，那么这个过滤器就只能在组件里面使用了，别的组件是不能使用的

filters: {
  formateTime (value) {
    let date = new Date(value)
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month < 10 ? `0${month}` : month
    let day = date.getDate()
    day = day < 10 ? `0${day}` : day
    let hours = date.getHours()
    hours = hours < 10 ? `0${hours}` : hours
    let minutes = date.getMinutes()
    minutes = minutes < 10 ? `0${minutes}` : minutes
    let seconds = date.getSeconds()
    seconds = seconds < 10 ? `0${seconds}` : seconds
    const formatStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    return formatStr
  }
}

过滤器的基本用法

过滤器的使用在js表达式的尾部，由管道符号('|', 一定要和'||'区分开)指示。管道符前面的变量就作为过滤器的参数。

用在插值语法中

<div class="hello">
  <div>时间：{{timeStr | formateTime}}</div>
</div>

效果如下：

过滤器不会改变原来的数据，它只是返回了新的数据

用在v-bind表达式中

<div v-bind:time="timeStr | formateTime">时间</div>

效果如下：

 

过滤器的链式用法

过滤器是可以串联的，也就是说可以像下面这样使用

{{ message | filterA | filterB }}

filterA被定义为单个参数的过滤器函数，表达式message作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB, 将filterA的结果传递到filterB中.

<template>
  <div class="hello">
    <div>时间：{{timeStr | formateTime | subtring}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      timeStr: new Date().getTime()
    }
  },
  filters: {
    formateTime (value) {
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? `0${month}` : month
      let day = date.getDate()
      day = day < 10 ? `0${day}` : day
      let hours = date.getHours()
      hours = hours < 10 ? `0${hours}` : hours
      let minutes = date.getMinutes()
      minutes = minutes < 10 ? `0${minutes}` : minutes
      let seconds = date.getSeconds()
      seconds = seconds < 10 ? `0${seconds}` : seconds
      const formatStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      return formatStr
    },
    subtring (value) {
      return value.substring(0, 4)
    }
  },
  methods: {
  }
}
</script>

效果如下：

过滤器传多个参数

⏰ 过滤器其实就是函数，它除了可以接受默认的管道符前面的参数外，它还可以自定义其他的参数与。

{{message | filterA('arg1', arg2)}}

filterA被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数，普通字符串'arg1'作为第二个参数，表达式arg2的值作为第三个参数

过滤器和计算属性的区别

1. 计算属性是依赖于组件的，只能在对应的组件中使用，而过滤器既可以是局部的，也可以是全局的
2. 计算属性不能传额外的参数，而过滤器可以自定义若干参数
3. 计算属性可以缓存，过滤器不能缓存
4. 计算属性更多地是偏向于属性，而过滤器更偏向于方法